Question

我使用角度2与路由器3.0.0-rc.1。请考虑教程中的以下模板：

`
<nav>
    <a routerLink="/crisis-center" routerLinkActive="active"
       [routerLinkActiveOptions]="{ exact: true }">Crisis Center</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
    <a routerLink="/crisis-center/admin" routerLinkActive="active">Crisis Admin</a>
</nav>
<router-outlet></router-outlet>
`

该教程有点无益地补充说：“我们可以在用户登录之前隐藏链接。但这很棘手且难以维护。”

我想隐藏管理员链接，直到用户登录。（简单地禁用选项卡并要求登录没有帮助，因为我不希望不能使用该功能的用户甚至看到标签就在那里）。有没有一种简单的方法可以在路由中指定它？

Answer 1

我不相信只显示/隐藏链接。查看canActivate功能。您可以指定是否可以访问给定的路由。完全覆盖http://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html。

显示/隐藏链接可以由一些具有角色和指令的authService完成，例如

import { Directive, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[yourDirectiveSelector]'
})
export class YourDirective implements OnInit {

  private customAuthService: CustomAuthService;
  private templateRef: TemplateRef<any>;
  private viewContainerRef: ViewContainerRef;


  constructor(customAuthService: customAuthService, templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
    this.customAuthService = customAuthService;
    this.templateRef = templateRef;
    this.viewContainerRef = viewContainerRef;
  }

  ngOnInit() {
    if (this.customAuthService.isOk()) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainerRef.clear();
    }
  }
}

如何在angular 2路由器中隐藏路由？

1 个答案: