Angular动态链接(click)绑定失效：点击触发页面重载求助

Angular的[innerHTML]只会把内容当作纯HTML渲染，不会对其中的Angular模板指令（比如(click)）进行编译。你写在字符串里的(click)="jumpToError($event)"只是被当成普通的HTML属性，完全不会触发组件里的函数；再加上href=""，点击时浏览器会执行默认跳转行为，导致页面重载。

推荐用Angular的Renderer2来给动态生成的链接绑定事件，既符合Angular的安全规范，又能正常触发函数。

步骤1：修改错误文本，给链接加标识类 #

把推入数组的HTML字符串里的a标签加上一个class，方便后续选择元素：

this.errors.push('At least 1 <a href="" class="error-jump-link">service</a> should be added.');

步骤2：组件类中绑定事件 #

引入Renderer2和ElementRef，在视图更新后找到所有动态链接，绑定点击事件：

import { Component, Renderer2, ElementRef, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewChecked {
  errors: string[] = [];
  // 标记是否已经绑定过事件，避免重复绑定
  private eventsBound = false;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    // 推入错误文本
    this.errors.push('At least 1 <a href="" class="error-jump-link">service</a> should be added.');
  }

  ngAfterViewChecked() {
    if (!this.eventsBound) {
      // 找到所有动态生成的错误链接
      const links = this.el.nativeElement.querySelectorAll('.error-jump-link');
      links.forEach((link: HTMLElement) => {
        // 绑定点击事件，阻止默认跳转并调用函数
        this.renderer.listen(link, 'click', (event: MouseEvent) => {
          event.preventDefault();
          this.jumpToError(event);
        });
      });
      this.eventsBound = true;
    }
  }

  jumpToError(event: MouseEvent): void {
    console.log('Clicking works!');
  }
}

步骤3：调整模板结构 #

把*ngFor放到<li>上，<ul>不需要循环：

<ul>
  <li *ngFor="let error of errors" [innerHTML]="error"></li>
</ul>

这样点击链接时就会触发jumpToError函数，同时不会触发页面重载了。

内容的提问来源于stack exchange，提问作者xRay