web-dev-qa-db-ja.com

Angular 2+：ルーターアウトレットの外側のアクティブルートにアクセスする方法

Angular 5アプリケーション。

アプリコンポーネントに次のコードがあります。

特定のルートのnavbarとtopbarを非表示にします。

app.component.tsで現在アクティブ化されているルートを取得することは可能ですか？もしそうなら、どのように？

不可能な場合、これを解決する解決策はありますか（ガードまたは他のものを使用して...）？

enter image description here

また、リアクティブでなければならないことにも留意してください。別のルートのサイドバーに切り替えると、navbarが再び表示されるはずです。

angularangular-router
13
Badis Merabet

これを試して：

app.component.ts内

import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  showSidebar$: Observable<boolean>;
  private defaultShowSidebar = true;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {
    this.showSidebar$ = this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      map(() => activatedRoute),
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      mergeMap(route => route.data),
      map(data => data.hasOwnProperty('showSidebar') ? data.showSidebar : this.defaultShowSidebar),
    )
  }

app.component.html

<aside *ngIf="showSidebar$ | async">Sidebar here</aside>

<router-outlet></router-outlet>

<a routerLink="/without-sidebar">Without sidebar</a>
<a routerLink="/with-sidebar">With sidebar</a>
<a routerLink="/without-data">Without data.showSidebar</a>

アプリのルート

RouterModule.forRoot([
  { path: 'with-sidebar', component: WithSidebarComponent, data: { showSidebar: true } },
  { path: 'without-sidebar', component: WithoutSidebarComponent, data: { showSidebar: false } },
  { path: 'without-data', component: WithoutDataComponent },
])

必要に応じて変更できます。

ライブデモ

10
Tomasz Kula

承知しました。ルーターイベントをフィルタリングし、アクティブ化されたルートのみを取得できます。その後、内部の各ルートに関する情報を見つけることができます（申し訳ありませんが、現時点では実際に言うことはできませんが、あなたが探しているもののように見えます）：

constructor(private _router: Router) {
  _router.events
    .filter(event => event instanceof NavigationEnd) 
    .forEach(item => {
      console.log(item);
      console.log(_router.routerState.root);
      console.log(_router.routerState.root.firstChild);
    });
}
1
Commercial Suicide

ルーターイベントをサブスクライブせずにアクティブなルートを取得するには、whileループを再帰的に使用して、最下位の子を見つけます。

private getActivatedRoute(): ActivatedRoute {
    let route = this.router.routerState.root;
    while (route.firstChild) {
        route = route.firstChild;
    }
    return route;
}
1
asdf