Question

如何 ngIf 动态路由器？例如，我有顶部导航组件，该组件的后退 button ，并且我希望后退的 button 仅在'item/:id'路线上显示为：

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

如何* ngIf动态路由？

Answer 1

您可以建立路线守卫。 canActivate保护标志打开，而canDeactivate关闭标志。然后，导航项将被绑定到该标志。

或者您也可以添加路由观察器，以监视特定事件并打开/关闭可以绑定的标志。

在此示例中，我使用路由事件来打开/关闭用于管理微调器的标志：

  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;
    }
  }

Angular 2路由器ngIf动态路由

1 个答案: