angular - 角空路由器链接

Question

在 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

Answer 1

这应该有效：

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