按钮标记内的路由器链接属性不起作用

Question

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

<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>

Answer 1

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

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

Answer 2

我dint导入路由器模块。之后它起作用了，

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

Answer 3

不要在按钮内嵌套锚，它与HTML5不兼容，并且在某些浏览器（如Firefox）中不起作用。正如GünterZöchbauer所说

一样，最好直接将routerLink应用于按钮

Answer 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>

希望我帮助你!!