web-dev-qa-db-ja.com

Angular 2でアプリコンポーネントにルートデータを取得する方法

以下のように、アプリルーティングモジュールでいくつかのルートデータを定義しました。

    const appRoutes:Routes = [
  {path: '', component: LoginComponent, data:[{PageName:"Login Page"}]}]

次のようにapp.component.tsのappRoutesを使用してURLリダイレクト関連情報を取得できるように、データをグローバルに取得します。

export class AppComponent {
  title = 'Welcome';
  constructor(public router: Router, public authenticationService: AuthenticationService) {
    this.router.events.subscribe(event => {
        console.log("Url",event.urlAfterRedirects);
        console.log("Page Name", router[PageName]); //Not working
      }

ActivatedRouteを挿入しようとしましたが、各リダイレクト後に更新されません。

とにかく、ページ名を設定してグローバルapp.component.ts。

javascriptangularangular-routing
8
user1188867

filterの代わりにsubscribeを試し、イベントをループしてください

constructor(router:Router, route:ActivatedRoute) {
    router.events
      .filter(e => e instanceof NavigationEnd)
      .forEach(e => {
        this.title = route.root.firstChild.snapshot.data['PageName'];
    });
}

次の動作デモを確認してください。 https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info

19
Hristo Eftimov

以下のようなルーターオブジェクトを使用して静的にルーティングした場合：

{パス： ''、pathMatch： 'full'、コンポーネント：NameComponent、データ：{variableName： 'variableValue'}}、

NgOnInit（）では、ActivatedRouteオブジェクトを使用して、ルーター定義から渡したデータを回復できます。

ngOnInit（）{this.localVariable = this.route.snapshot.data ['variableName']; }

Obs：私はAngular 5！

12
Pablo

Angular 5+

このサービスは、現在のルート上のデータを取得します：（私の場合は「タイトル」）

import { Injectable } from "@angular/core";
import { Router, ActivatedRouteSnapshot } from "@angular/router";

@Injectable()
export class AppRoutingService {

  constructor(private router: Router) { }

  public getRouteTitle(): string {
    return this.getRouteData("title");
  }

  private getRouteData(data: string): any {
    const root = this.router.routerState.snapshot.root;
    return this.lastChild(root).data[0][data];
  }

  private lastChild(route: ActivatedRouteSnapshot): ActivatedRouteSnapshot {
    if (route.firstChild) {
      return this.lastChild(route.firstChild);
    } else {
      return route;
    }
  }
}

コンポーネントロジック：

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Router, NavigationEnd } from "@angular/router";

// SERVICES
import { RouterService } from "../../shared/services/router.service";

@Component()
export class NavSubmenuComponent implements OnInit, OnDestroy {
  title: string = "";
  routerEvents: any;

  constructor(private router: Router, private routerService: RouterService) { }

  ngOnInit() {
    this.title = this.routerService.getRouteTitle();

    this.routerEvents = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe(() => {
        this.title = this.routerService.getRouteTitle();
      });
  }

  ngOnDestroy() {
    this.routerEvents.unsubscribe();
  }
}
1
FaustmannChr

NgAfterViewInitイベントまで待機する場合は、viewchildを使用してルーターアウトレットにリンクできます。

つまり.

  @ViewChild('router')
  private routerOutlet: RouterOutlet;

  ngAfterViewInit() {
    this.routerOutlet.activateEvents
      .pipe(
        map(() => this.routerOutlet
          .activatedRouteData
        )
      )
    .subscribe((data) => {
        // Code 
    });
  }

<router-outlet #router="outlet"></router-outlet>
0
andrebarata