Angular2ルーターngIf動的ルート

debugcn 投稿 Dev

アンドリウスL.

動的ルーターをngIfする方法は？たとえば、戻るボタンのあるトップナビゲーションコンポーネントがあり、戻るボタンが次のルートでのみ表示されるようにしたい場合：'item/:id'

*ngIf="router.url == '/item' or '/item/:id' -そしてそれは機能していません。

動的ルートを* ngIfする方法は？

DeborahK

ルートガードを構築できます。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;
    }
  }