Angular5 对 IE 和 Firefox 中的 Routerlink 和按钮没有响应

Question

我有一个新的 Angular 5 CLI 应用程序，并为应用程序的顶部构建了一个导航菜单组件。当我在 Edge 和 Chrome 中单击我的菜单项时，它可以完美运行并遵循我在 app.module.ts 中定义的路线。但是，当我单击 IE11 或 Firefox 中的链接时，没有任何反应。我去启用了所有可以在 polyfills.ts 中看到的 polyfill，但仍然没有变化，尽管它们确实解决了在 IE11 中渲染材质图标的问题。

    <span *ngIf="isLoggedIn() == false">
      <button  [routerLinkActive]="['link-active']" mat-icon-button >
        <a [routerLink]="['/login']">
          <mat-icon>account_circle</mat-icon> Login
        </a>

      </button>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </span>

如果我把

     <a [routerLink]="['/login']">
          <mat-icon>account_circle</mat-icon> Login
        </a>

按钮节点的一部分我可以单击它并且它在 IE11 和 Firefox 中正确路由，所以我的路由很好。以某种方式激活锚点在 IE11 和 Firefox 中不起作用。有谁知道这可能是什么？Edge 和 Chrome 完美运行。

Answer 1

这个问题的答案其实很简单。

<button> 标签实际上是不需要的，mat-icon-button 样式可以应用于 <a> 标签

    <a [routerLink]="['/login']" [routerLinkActive]="['link-active']" mat-icon-button>
      <mat-icon>account_circle</mat-icon> Login
    </a>

这样就达到了预期的效果。我发现该按钮遮住了 IE 和 Firefox 中的锚点。当我进行测试时

onclick="this.children[0].children[0].click()"

在按钮上，该路由在 Firefox 和 IE 中有效，这使我得到的答案是，消息没有到达这两个浏览器上的锚点。