Angular2: динамически делая части текста кликабельными

angular typescript

630 просмотра

1 ответ

У меня есть текст с хэштегами внутри. Я хочу сделать эти теги кликабельными. Я создал канал, который пометит все теги с помощью cssClass hashTag. Теперь мне нужно обработать события клика по этим тегам

Вот пример кода

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {eigonic} from './hashtag'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 [innerHtml]="txt|hash"></h2>

    </div>
  `,
  pipes:[eigonic.Hashtag],
})
export class App {
  constructor() {
    this.txt = 'This is a #simple post on #Angular !'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ],
})
export class AppModule {}

а вот и труба

import {Pipe} from '@angular/core';

export module eigonic {
    @Pipe({ name: 'hash' })
    export class Hashtag {    
        transform(value: string): string {
            return value == undefined ? value : value.replace(new RegExp('(#[A-Za-z0-9-_]+)', 'g'), '<span btn clear class="hashTag" >$1</span>'); 
        }

    }
}

и plunkr на случай, если вы захотите поиграть.

https://plnkr.co/edit/vT1MrJNsupkBrhIMQ6qv

Автор: Amr ElAdawy Источник Размещён: 08.11.2019 10:57

Ответы (1)


3 плюса

Решение

Вы можете использовать HostListener для этой цели следующим образом:

@HostListener('click', ['$event'])
onClick(e) {
  if (e.target.classList.contains('hashTag')) {
    alert('HashTag!');
  }
}

Вот ваш раздвоенный и обновляется бухнуться Проверьте src/app.ts. Подробнее о HostListener в документах

Автор: Yaroslav Grishajev Размещён: 20.08.2016 10:53
Вопросы из категории :
32x32