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

Angular不会处理使用[innerHTML]="..."或任何其他方式添加的HTML。静态添加到comopnents模板时，(click)="..."等绑定只能

。

您可以使用

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

Answer 2

我最终制定了以下内容。

我已将(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....]);
    }
}

使用innerHTML angular时绑定到事件的外部内容

2 个答案: