按钮标签中的路由器链接属性不起作用答案

【问题标题】：router link attribute within the button tag doesnt work按钮标签中的路由器链接属性不起作用
【发布时间】：2017-12-05 11:12:06
【问题描述】：

我无法使用按钮标签内的路由器链接属性进行导航。这是我的代码，

<button mat-raised-button color="primary"><a routerLink="/message-inbox">Inbox</a></button>
    <button mat-raised-button color="accent"><a routerLink="/sent">Sent</a></button>
    <a routerLink="/message-compose"><button color="warn">Compose</button></a>

【问题讨论】：

按钮内的<a>元素渲染了吗？
@Karty 还有更多答案here

标签： angular angular-cli

【解决方案1】：

您可以直接将routerLink 应用于按钮。它不必是 <a 元素

<button mat-raised-button color="primary" routerLink="/message-inbox">Inbox</button>

【讨论】：

我尝试导入路由器模块。之后它工作了
对我来说也是如此.. 将它导入到 .ts 文件中后，它开始为我的情况下的按钮元素（mat-button）工作 - 即使其他带有 routerLink 的<a 锚链接工作正常同一页

【解决方案2】：

我尝试导入路由器模块。之后就成功了，

import { RouterModule } from '@angular/router';

【讨论】：

这很奇怪，你必须导入它，这样你才能在按钮上使用它。使用a 锚点就不需要了……奇怪吗？不过谢谢。
谢谢！这是我的问题。对于指定导入 + 声明的新手，您本可以澄清一下您的答案：``` import { RouterModule } from '@angular/router'; @NgModule({ 声明: [], 进口: [ RouterModule ], 出口: [] }) 出口类 MyClass{ } ```

【解决方案3】：

不要在按钮内嵌套锚点，它与 HTML5 不兼容，并且在某些浏览器（如 Firefox）中不起作用。正如 Günter Zöchbauer 所说，最好将 routerLink 直接应用于按钮

【讨论】：

【解决方案4】：

如果你尝试这样的事情会怎样：

<button mat-raised-button color="primary">
<a [routerLink]="['/message-inbox']">Inbox</a>
</button>
    <button mat-raised-button color="accent">
<a [routerLink]="['/sent']">Sent</a>
</button>
    <a [routerLink]="['/message-compose']"><button color="warn">Compose</button></a>

希望能帮到你！！

【讨论】：