带有href的简单锚标记导致Angular中的页面刷新

【问题标题】：Simple anchor tag with href causing page refresh in Angular带有href的简单锚标记导致Angular中的页面刷新
【发布时间】：2020-08-09 23:07:01
【问题描述】：

我有一个 web 组件，它使用一个简单的锚标记和一个指向路由的 href。

点击链接后，应用程序会重新加载。

我不能使用 routerLink（Web 组件不是 Angular）。避免页面重新加载的最佳方法是什么？

【问题讨论】：

标签： angular href router web-component

【解决方案1】：

为了解决这个问题，我会监听对“a”标签的点击，并在它不包含“routerlink”属性时阻止默认行为。

  @HostListener('window:click', ['$event'])
  onClick(e: any) {
    const path = e.composedPath() as Array<any>;

    const firstAnchor = path.find(p => p.tagName && p.tagName.toLowerCase() === 'a');
    if (firstAnchor && !firstAnchor.hasAttribute('routerlink')) {
      const href = firstAnchor.getAttribute('href');

      this.router.navigateByUrl(href);

      e.preventDefault();
    }
  }

【讨论】：

这确实解决了这个问题！感谢您发布:)。