有条件地将 RouterLink 或其他属性指令添加到角度2中的元素

在角度2中，如果我有一个像 <button></button>这样的元素，我怎样才能有条件地向它添加一个像 [routerLink]="['SomeRoute']这样的属性指令呢？

65559 次浏览
小开
最佳答案

据我所知，没有直接的方法可以做到这一点。有一些变通方法... 我用了这样的东西:

<button *ngIf="condition" [routerLink]="['SomeRoute']"></button>
<button *ngIf="!condition"></button>

这里有一个类似的讨论: 链接

小开

或者您可以简单地向属性添加一个条件。

<button [routerLink]="myVar ? ['/myScreen'] : []"></button>

仅当 myVar 为 true 时才重定向到’/myScreen’。

小开 
   <div [ngClass] ='{"disabled-link":!isMicrositeEnable,"cursor-pointer":"isMicrositeEnable"}' [routerLink]="isMicrositeEnable ? ['/microsite'] : []">
小开

如果您不想复制元素，只是想根据条件防止点击，您可以执行以下操作:

<button
[style.pointer-events]="condition ? 'auto' : 'none'"
routerLink="/some/route"
>
</button>
小开

只是个小细节。尽量避免使用导航按钮。屏幕阅读器不会理解，这是一个导航出框。现在您需要添加一个 Aria-label，告诉屏幕阅读器它的功能。这将添加更多代码。但是简单的解决方案是将[ routerLink ]添加到锚链接中。然后把它设计成一个按钮。但我更喜欢使用标准的蓝色链接，因为人们通常知道会发生什么。我永远不会右键点击一个按钮，然后在新标签页上打开它。因此: 用于操作的按钮和用于导航的锚链接

小开

这在角度10中对我很有用:

<button routerLink="\{\{MyVar == true ? '/route/' + item.id : '/same/route'}}"></button>
小开

这是工作样本。当您需要带来多个条件时，您可以具有如下内部条件

<a class="dropdown-item" href="javascript:void(0);" [routerLink]="app.treatment === 'X' ? ['/route1', app._id] : app.treatment === 'Y' ? ['/route2', app._id] : ['/route3', app._id] ">Go</a>
小开

我不会使用一个按钮与 RouterLink。A 会使用一个类似按钮的锚链接来完成这项工作。按钮元素用于操作，锚用于路由/导航。 下面的代码将告诉浏览器/屏幕阅读器等它是什么。

<a *ngIf="condition" class="make_it_look_like_a_button" [routerLink]="['somehere']">test</a>
<button *ngIf="!condition">Test</button>

当右键单击它时，上面的链接案例将有“在新标签中打开...”。但它的一个缺点是，当它作为一个按钮时，几乎没有人会想到它。

小开

最简单的方法是将条件包装在三元运算符中，如下所示:

<button [routerLink]="(myVar ? if_true : if_not_true)"></button>

提交答案