Angular 7 路由和导航在 IE 11 中不工作
Angular 7 Routing and Navigation is not working in IE 11
在我的 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>
这是一个已知问题,如果 <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 应用程序中,我使用 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>
这是一个已知问题,如果 <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触发超链接点击事件