Angular2 Router - 有条件地隐藏链接

Question

有没有办法在 Angular2 中有条件地隐藏路由器链接？

比如我有下面的代码；

<li><a [routerLink]="['RegisterUser']">Register User</a></li>

我想在用户登录时隐藏链接。

在我的组件上，我使用 @CanActivate 装饰器来确定路由是否可以被激活，但这并没有隐藏链接本身。

@CanActivate(() => hasValidToken())

我可以将*ngIf 结构指令与hasValidToken() 方法(返回一个 bool 值)一起使用，但这看起来很笨拙有点脏。

<li><a [routerLink]="['RegisterUser']" *ngIf="!hasValidToken()">Register User</a></li>

有没有更简洁的方法来解决这个问题？

谢谢

Answer 1

我是如何做到的，如果你想在未来添加更多路由，创建一个带有观察登录事件的可观察对象的服务会更容易。

然后我只使用 ngOnChanges，当有人登录时，我将其他菜单项附加到我的菜单并在我的 [routerLink] 上执行 *ngFor 循环。

@Component({
  selector: 'my-cmp',
  template: `<li *ngFor="#prop in myProps><a [routerLink]="[prop]">Register User</a></li>`
})
class MyComponent implements OnChanges {
  @Input() LoggedIn: any;
  constructor(){
    myProps = ['About_Me', 'Not_Logged_In_Menu_Item'];
  }
  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
    myProps.push(changes['LoggedIn'].currentValue);
    console.log('ngOnChanges - myProps = ' + changes['myProps'].currentValue);
  }
}

不过，我这样做的唯一原因是，如果您感觉不对，您将不得不为登录用户更改额外的菜单项。这是针对 Auth 和 Auth 应用程序的，其中一些用户比其他用户拥有更多访问权限。