角空路由器链接答案

【问题标题】：Angular empty router link角空路由器链接
【发布时间】：2021-07-21 16:25:48
【问题描述】：

在 Angular 11 中，我正在动态渲染导航组件。所以有这样的代码：

<li [routerLinkActive]="active">
    <a [routerLink]="navItem.route">navItem.linkText</a>
</li>

这很好，除非我有一个导航部分，它实际上不是一条路线，而是触发子项目打开。我仍然希望 routerLinkActive 正确应用该类，但我不希望它在任何地方导航。

路由值是空的，但这不起作用，所以我尝试将它设置为这样的空数组：

<li [routerLinkActive]="active">
    <a [routerLink]="navItem.route ? navItem.route: []">navItem.linkText</a>
</li>

但空数组被解释为链接到我的主页，因此在初始渲染时主页链接被突出显示，但任何具有空路由的子项也是如此。

有没有一种方法可以像我一样动态创建导航，让 routerlinkactive 指令正确应用该类，但链接实际上不能在任何地方导航？

【问题讨论】：

标签： angular

【解决方案1】：

这应该可行：

<li [routerLinkActive]="active">
    <a [routerLink]="navItem.route ? navItem.route: undefined">navItem.linkText</a>
</li>

【讨论】：

undefined 对我来说确实很奇怪。我是这样用的[routerLink]="false ? 'inspection' : undefined"我不知道你在navItem里有什么
如果是真的，我会到达localhost:4200/inspection，如果是假，什么都不会发生。
如果 navItem.route 是一个字符串，那么 navItem.route 总是 true
未定义routerLink时，routerLinkActive是否适用于你？
我不像你那样使用routerLinkActive，我直接在<a></a>元素上使用它。但是如果路由不匹配routerLink，它就不会激活。