如何创建 Angular 2 指令来解析主题标签并创建点击事件？

Question

我有一个 Ionic 2 (Angular 2) 应用程序，它的 div 包含可能包含主题标签的文本。我需要创建一个解析文本的指令，并为每个主题标签将其替换为带有类和点击事件的跨度：

    <div>I am a post that includes #hashtag1 and #hashtag2<div>

应该变成：

    <div>I am a post that includes 
      <span class="hashtag" (click)="gotoHashtag('hashtag1')>#hashtag1</span> 
      and 
      <span class="hashtag" (click)="gotoHashtag('hashtag2')>#hashtag2</span>
    </div>

在我的 Ionic 1 应用程序（角度 1）中，我使用了 angular-hashtagify 指令：https://github.com/rossmartin/angular-hashtagify

我正在尝试为我的 Ionic 2 应用程序制作一个 angular 2 版本。到目前为止，我有：

import {Directive,ElementRef,Renderer} from '@angular/core';
import {NavController} from 'ionic-angular';
import {HashtagPage} from '../pages/hashtag/hashtag';

@Directive({
    selector:'[hashtagify]'
})
export class HashtagifyDirective{

constructor(private el:ElementRef, private render:Renderer, public navCtrl: NavController){
}

private addHashtag() {
    setTimeout(()=> {
       let content = this.el.nativeElement.innerHTML;
       let newcontent = content.replace(/(^|\s)*#(\w+)/g, '$1<span class="hashtag">#$2</span>');
        this.render.setElementProperty(this.el.nativeElement, 'innerHTML', newcontent);
        this.render.listen(this.el.nativeElement, 'click', (event) => {
            event.stopPropagation();
            event.preventDefault();
            let hashtag = event.target.innerText;
            this.navCtrl.push(HashtagPage, {'hashtagTitle': hashtag.substring(1, hashtag.length)});
         });
     },1);
}

     ngOnInit(){
        this.addHashtag();
     }
}

这段代码正确地设置了主题标签的样式，但是它将点击事件放在了 div 上而不是 span 上。我只需要一点帮助将点击事件放在每个包含格式化主题标签的跨度上。我的猜测是我必须为每个跨度使用渲染器的 addElement 函数，然后向该新元素添加一个点击事件，但我不确定如何。谢谢你尽你所能的帮助。

Answer 1

我希望这就是你想要的

改变了 add HashTag 方法点击事件监听器

private addHashtag() {
          setTimeout(()=> {

        let content = this.el.nativeElement.innerHTML;

        let newcontent = content.replace(/(^|\s)*#(\w+)/g, '$1<span class="hashtagColored">#$2</span>');
            this.render.setElementProperty(this.el.nativeElement, 'innerHTML', newcontent);
            this.render.listen(this.el.nativeElement, 'click', (event) => 
            if(event.srcElement.classList.contains('hashtagColored')){
              console.log(); // this is the if that checks the class
                event.stopPropagation();
                event.preventDefault();
                let hashtag = event.target.innerText;
                this.navCtrl.push(Page1, {'hashtagTitle': hashtag.substring(1,hashtag.length)});
            });
          },1);
    }

Plunker 链接 - http://plnkr.co/edit/Y5wAVyhOPJNViGdYJ9d5?p=preview