如何創建一個Angular 2指令來解析hashtags並創建一個click事件？

Question

我有一個Ionic 2（Angular 2）應用程序，其div文本可能包含hashtags。我需要創建一個解析文本指令，併爲每個主題標籤與類和點擊事件，跨度替換它：

<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> 

在我離子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(); 
    } 
} 

此代碼正確地設置hashtag的樣式，但它將click事件放置在div上而不是span上。我只需要一點點幫助將click事件放在每個包含格式化hashtag的跨度上。我的猜測是我必須爲每個跨度使用渲染器的addElement函數，然後向該新元素添加一個單擊事件，但我不知道如何。謝謝你盡你所能的幫助。

Answer 1

我希望這是什麼是你想要

Chnaged附加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