Angular 7 路由和导航在 IE 11 中不工作

Question

在我的 Angular 应用程序中，我使用 RouterModule 实现了路由。我在一个页面上有三个按钮，单击该页面可以导航到另一个页面。在 Chrome、Firefox 和 Safari 上一切正常，但在 IE 11 中不工作。

app.module.ts

...
const routes: Routes = [
  { path: 'world', component: WorldComponent },
  { path: 'india', component: IndiaComponent },
  { path:'state', component: StateComponent},
  { path: '**', component: IndiaComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
...

app.component.html

<nav>
    <button mat-raised-button class="mat-button">
      <a routerLink="/india" routerLinkActive="active">India's Dashboard</a>
    </button>
    <button mat-raised-button class="mat-button">
      <a routerLink="/state" routerLinkActive="active">Indian-State's Dashboard</a>
    </button>
    <button mat-button class="mat-button">
      <a routerLink="/world" routerLinkActive="active">World's Dashboard</a>
    </button>
  </nav>

Answer 1

这是一个已知问题，如果 <a> 标签位于 button 元素内。一旦我们在IE浏览器中点击按钮，就会触发按钮的点击事件，而不是<a>标签的点击事件。所以，路由不起作用。

要解决这个问题，您可以尝试使用以下方法：

方法一：将<button>标签改为<div>标签。

  <div mat-raised-button class="mat-button">
    <a routerLink="/user" routerLinkActive="active">User Dashboard</a>
  </div>
  <div mat-raised-button class="mat-button">
    <a routerLink="/about" routerLinkActive="active">About Dashboard</a>
  </div>

方法二：把<button>标签放在<a>标签里

    <a routerLink="/user" routerLinkActive="active"><button mat-raised-button class="mat-button">User Dashboard</button></a>

    <a routerLink="/about" routerLinkActive="active"> <button mat-raised-button class="mat-button">About Dashboard</button></a>

方法三：点击按钮时，使用Jquery触发超链接点击事件

Angular 7 路由和导航在 IE 11 中不工作

Angular 7 Routing and Navigation is not working in IE 11

navigation

angular7

internet-explorer-11

router

angular7-router