Question

在Angular 2中，如果我有一个像[routerLink]="['SomeRoute']这样的元素，我怎么能有条件地添加像x <- 84601 # index from end in case of extra hours digit y <- paste0(substr(x, 1, nchar(x)-4), ':', substr(x, nchar(x)-3, nchar(x)-2), ':', substr(x, nchar(x)-1, nchar(x))) y # [1] "8:46:01"这样的属性指令呢？

Answer 1

或者您可以简单地为属性添加条件。

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

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

Answer 2

据我所知，没有直接的方法可以做到这一点。有一些解决方法......我使用过这样的东西：

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

此处有类似的讨论：link

Answer 3

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

Answer 4

如果您不想重复该元素，而只是想根据情况防止点击，则可以执行以下操作：

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

Answer 5

这是一个工作样本。当你需要带一个以上的条件时，你可以有如下的内在条件

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

Answer 6

只是一个细节。尽量避免使用按钮进行导航。屏幕阅读器不会理解其开箱即用的导航功能。现在，您需要添加一个aria标签，告诉屏幕阅读器它的作用。这将添加更多代码。但是，简单的解决方案是将[routerLink]添加到锚链接。然后将其样式设置为按钮。但是我更喜欢使用标准的蓝色链接，因为人们通常都知道接下来会发生什么。例如：我永远不会尝试右键单击按钮并在新标签页中打开它。因此：用于操作的按钮和用于导航的定位链接

Answer 7

这在 Angular 10 中对我有用：

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

Answer 8

我不会在 routerLink 中使用按钮。 A 将使用样式为按钮的锚链接来执行此操作。按钮元素用于操作，锚点用于路由/导航。下面的代码会告诉浏览器/屏幕阅读器等它是什么。

/<?[^<>]*>|<[^>]*/g

上面的链接案例将在右键单击时显示“在新选项卡中打开...”。但是有一个缺点就是当它是一个按钮样式时，几乎没有人会想到它。

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

8 个答案: