angular - 根据条件禁用路由器导航链接

Question

如何router.navigate根据状态禁用链接或链接？

如果状态为“否”，那么我不能键入链接来编辑材料？

HTML

<button type="button" (click)="onEditMaterial(material.id)">Edit </button>

TS

onEditMaterial(material_id) {
  this.router.navigate(['materials', material_id, 'edit']);
}

Answer 1

<button [attr.disable]="status === 'No'">click me</button> . status是角度分量中的字符串。<button [disable]="status === 'No'">click me</button>句法。

编辑：disable属性是用于<input> , <button>等的 HTML5 属性。您可以使用一些 css 使其看起来更好，以获得更好的 UX，如下所示：button:disabled {cursor: not-allowed;}

编辑：另一种方式是这样的

onEditMaterial(material_id) {
    if (this.status === 'No') return; // if the status is 'No' don't do anything

    this.router.navigate(['materials', material_id, 'edit']);
  }

Answer 2

要禁用该按钮，您可以按照 DrNio 提供的答案进行操作。根据评论中的对话，如果即使在浏览器中更改 URL 也想阻止导航，那么您需要使用Router Guard. 在此处查看 AuthGuard 的示例：https ://angular.io/guide/router#component-less-route-grouping-routes-without-a-component 。搜索export class AuthGuard implements CanActivate。你基本上需要实现canActivate方法。