[innerHTML] 中的 Angular routerLink答案

【问题标题】：Angular routerLink within [innerHTML][innerHTML] 中的 Angular routerLink
【发布时间】：2018-01-26 01:28:20
【问题描述】：

我一直在寻找一种方法来使标准 a[href] 链接在动态加载到 [innerHTML] 时像 routerLinks 一样工作。它似乎不是标准的东西，我找不到任何我需要的东西。

我有一个可行的解决方案，但想知道是否有人知道任何更好的方法来做到这一点，或者我这样做可能会遇到任何潜在问题。

我在 app-routing.module.ts 中使用 jQuery，所以我声明了变量：

declare var $:any;

然后我会找到所有具有 href 属性但不具有 routerlink 属性的锚点。然后我可以获取路径名并告诉路由器在点击时导航到它。

$(document).on('click', `a[href]:not("a[routerlink]"):not("a[href^='mailto:']"):not("a[href^='tel:']")`, function(e){
    if(location.hostname === this.hostname || !this.hostname.length){
        e.preventDefault();
        router.navigate([this.pathname]);
    }
});

这似乎可以完成这项工作，但我认为必须有一种更“角度”的方式来做到这一点......

【问题讨论】：

标签： angular angular-router

【解决方案1】：

这可能不是最好的方法，但您可以使用Renderer 和ElementRef 将事件侦听器添加到锚标记，如this article 中所述。


@Component({
  selector: 'app-example-html',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.less'],
})
export class ExampleComponent implements AfterContentInit {

  private clickListeners: Array<(evt: MouseEvent) => void> = [];

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

  ngAfterViewInit() {
    const anchorNodes: NodeList = this.el.nativeElement.querySelectorAll('a[href]:not(.LinkRef)'); // or a.LinkPage

    const anchors: Node[] = Array.from(anchorNodes);

    for (const anchor of anchors) {
      // Prevent losing the state and reloading the app by overriding the click event
      const listener = this.renderer.listen(anchor, 'click', (evt: MouseEvent) => this.onLinkClicked(evt));
      this.clickListeners.push(listener);
    }
  }

  private onLinkClicked(evt: MouseEvent) {
    evt.preventDefault();
    if (evt.srcElement) {
      const href = evt.srcElement.getAttribute('href');
      if (href) {
        this.router.navigateByUrl(href);
      }
    }
  }
}

【讨论】：