innerHTMLを使用している場合、クリックイベントから外部コンテンツへのバインド

Question

外部コンテンツからのイベントにバインドすることは可能ですか？コンテンツはinnerHTML

私は外部コンテンツを取得し、私のアプリ内でそれを表示する以下のコードがあります。 <a>タグのonClickイベントを再生しようとしています。 <a>はルートリダイレクトです。私は新しいルートにルーティングする前にいくつか他のことをしたいので、私のアプリケーション内に存在する必要があります。

私はhandleClick関数を設定しようとしましたが、これを行う正しい方法ではないと思います。

私はおそらくElementRef - この場合は#viewを使用していると考えていましたが、この場合はjquery lightが良いでしょう。

@Component({ 
    selector: 'overview-details', 
    template: ` 
    <h2>{{ title }}</h2> 
    <div #view [innerHTML]="regCode | sanitizeHtml"></div> 
    ` 
}) 

ngOninit() { 
    this.regcode = ` 
     <div> 
      <h1>RegCode Content</h1> 
      <a class="link" (click)="handleClick()">Link</a> 
     </div> 
    `; 
} 

//within controller 
handleClick(){ 
    // do some stuff 
    // then route 
    router.navigate([somewhere....]); 
} 

Answer 1

を使用することができます。

私はdivに(click)を追加しても<a>にdata-routeを追加し、値を取得するためにevent.target.dataset.routeを使用することができます。誰にも同様の問題を持っているだけで包み

@Component({ 
    selector: 'overview-details', 
    template: ` 
    <h2>{{ title }}</h2> 
    <div (click)="handleClick($event)" [innerHTML]="regCode | sanitizeHtml"></div> 
    ` 
}) 

ngOninit() { 
    this.regcode = ` 
     <div> 
      <h1>RegCode Content</h1> 
      <a class="link" data-route="0">Link</a> 
     </div> 
    `; 
} 

handleClick(event: any) { 
    console.log('fire', event.target.dataset.route); 
    if (event.target.dataset.route == 0) { 
     router.navigate([somewhere....]); 
    } esle { 
     router.navigate([somewhereElse....]); 
    } 
} 

Answer 2

角度は、[innerHTML]="..."または他の方法で追加されたHTMLを処理しません。 (click)="..."のようなバインディングがの場合、comopnentsテンプレートに静的に追加されます。

あなたは、私が最後に次のように働いた

constructor(private elRef:ElementRef) {} 

ngAfterViewInit() { 
    this.elRef.nativeElement.querySelector('a.link').addEventListener('click', this.handleClick.bind(this)); 
}