RouterLink在IE和Firefox中不起作用(路由不跳转)的问题

2,211 阅读1分钟

问题描述

假设路由已配置好,但运行如下代码后,点击 Admin 按钮却没有跳转至 admin 界面。(clrDropdownItem为按钮样式)

main.component.html

<button type="button" clrDropdownItem >
	<a routerLink="/admin"> Admin </a>
</button>

解决方法

方法一

将 clrDropdownItem 样式放在<a>标签,不使用<button>标签

<a clrDropdownItem routerLink="/admin"> Admin </a>

咦,样式不生效怎么办?看方法二吧。

方法二

使用<button>标签和Router.navigate方法

main.component.html

<button type="button" clrDropdownItem (click)="gotoAdmin()">
    Admin
</button>

main.component.ts

import { Router } from '@angular/router';
...
export class MainComponent  {
    constructor(
        private router: Router
    ) {}
    
    gotoAdmin() {
        this.router.navigate(['/admin']);
    }
}

参考链接

Angular5在IE和Firefox中没有使用Routerlink和按钮的响应

Angular官方文档:路由与导航