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

我計算出到底以下。

我加入了(click)到div並且還添加了data-route到<a>並且可以使用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

Angular不處理用[innerHTML]="..."或任何其他方式添加的HTML。綁定像(click)="..."工作只有靜態添加到comopnents模板時。

您可以使用

constructor(private elRef:ElementRef) {} 

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