javascript - 使用innerHTML Angular时将点击事件绑定(bind)到外部内容

Question

是否可以绑定(bind)到来自外部内容的事件。内容通过 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。像(click)="..." 这样的绑定(bind)仅在静态添加到组件模板时才有效。

您可以使用

constructor(private elRef:ElementRef) {}

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