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

Question

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

单击链接时，应用程序将重新加载。

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

标签： angularhrefrouterweb-component

Answer 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();
    }
  }