Angular 8- routerLink vs [routerLink]结合routerLinkActive问题

Question

当我使用以下代码时，routerLinkActive可以工作，但它无法构建。

<a mat-button routerLinkActive="mat-raised-button [routerLink]="login">Inloggen</a>

当我使用下面的代码时，routerLinkActive不工作，但是构建成功了。

<a mat-button routerLinkActive="mat-raised-button" routerLink="login">Inloggen</a>

我如何解决这个问题？如果我使用第一个代码，我的Azure DevOps构建管道不会因为这个错误而结束。

生成错误：“类型‘LoginHeaderComponent’上不存在属性'login‘。”

找到问题所在。我忘记了第二行代码的'/‘。

Answer 1

试着这样写：

<a mat-button routerLinkActive="mat-raised-button" [routerLink]="['/login']">Inloggen</a>

Angular将获取您的路径片段并生成一个URL。如果该url与您当前位置相匹配，那么它将添加您指定的类

https://angular.io/api/router/RouterLink

为什么你最初的尝试没有达到你预期的效果。

这不起作用的原因是因为它将login作为模板变量读取。

<a mat-button routerLinkActive="mat-raised-button" [routerLink]="login">Inloggen</a>

这不起作用的原因是因为它试图构建一个相对于您当前路径的路径，如"/login“

<a mat-button routerLinkActive="mat-raised-button" routerLink="login">Inloggen</a>

您可能会尝试这样做，看看它是否有效，但我更喜欢我第一个建议的语法，因为它与文档相匹配：

<a mat-button routerLinkActive="mat-raised-button" routerLink="/login">Inloggen</a>

Answer 2

您正在尝试使用组件中不存在的login属性绑定[routerLink]。

您可以在组件中创建一个属性并将链接分配给它，或者如果login是URL，则需要删除绑定，如：routerLink="/login"

仅当路由路径与routerLinkActive中的login路径匹配并变为活动状态时，routerLinkActive才能工作。

如果URL为login，则routerLinkActive仅添加CSS类。