如何创建 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 应用程序制作一个角度 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 上而不是跨度上。 我只需要一点帮助将点击事件放置在每个包含格式化主题标签的跨度上。 我的猜测是，我必须为每个跨度使用渲染器的 addElement 函数，然后向该新元素添加一个单击事件，但我不确定如何。感谢您提供的任何帮助。

Answer 1

我希望这就是你想要的

添加 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);
    }

普伦克链接 - http://plnkr.co/edit/Y5wAVyhOPJNViGdYJ9d5?p=preview