javascript - Angular 2路由器ngIf动态路由

Question

如何ngIf动态路由器？例如，我有一个 top navigation component，它有返回 button，我希望返回 button 只在 'item/上可见: id' 路由:

*ngIf="router.url == '/item' or '/item/:id' - 它不工作。

如何*ngIf动态路由？

Answer 1

您可以构建路径守卫。 canActivate 守卫打开标志，canDeactivate 关闭标志。然后导航项将绑定(bind)到该标志。

或者您可以添加一个路由事件观察器来观察特定事件并打开/关闭您可以绑定(bind)的标志。

在这个例子中，我使用路由事件来打开/关闭一个标志来管理一个微调器:

  constructor(private authService: AuthService,
              private router: Router,
              private messageService: MessageService) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }

您可以执行类似的操作来监视一组特定路线的 NavigationStart 事件。例如(没试过):

  constructor(private authService: AuthService,
              private router: Router,
              private messageService: MessageService) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent, router.url);
    });
  }

  checkRouterEvent(routerEvent: Event, routerUrl: string): void {
    if (routerEvent instanceof NavigationStart && routerUrl == '/item') {
      this.myflag= true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.myflag= false;
    }
  }