Question

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

例如，我有以下代码;

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

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

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

@CanActivate(() => hasValidToken())

我可以使用*ngIf结构指令和hasValidToken()方法（返回一个布尔值），但这看起来很重，而且有点脏。

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

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

由于

Answer 1

我是如何做到这一点的，如果你想在将来添加更多路由，这会更容易创建一个带有observable的服务来监视一个loggedIn事件。

然后我只使用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应用程序，其中一些用户比其他用户拥有更多访问权限。

Angular2路由器 - 有条件地隐藏链接

1 个答案: