我如何有条件地禁用routerLink属性？

在我的Angular 2应用程序中，我试图禁用一个routerLink没有任何成功。 我试图处理click事件（与event.preventDefault()和event.stopPropagation() ）上的click事件，但它不起作用。

我怎样才能禁用routerLink？

Answer 1

禁用pointer-events

 <a [routerlink]="xxx" [class.disabled]="disabled ? true : null">Link</a> a.disabled { pointer-events: none; cursor: default; } 

另请参阅Angular2，什么是禁用锚元素的正确方法？

Answer 2

不需要禁用任何指针事件：

模板：

 <a [routerLink]="homeLinkEnabled ? '/home' : null" routerLinkActive="is-active">Home</a> 

可选的CSS：

 .is-active { cursor: default; text-decoration: none; } 

描述：

当homeLinkEnabled返回false ， null将使routerLink链接到当前/活动路由。

如果routerLink链接到活动路由，则将应用routerLinkActive指定的类。

在那里我们可以指定如何禁用routerLink应该出现。

到活动路由的routerLink将不会触发导航事件。