Angular 2에서 앱 구성 요소로 경로 데이터를 가져오는 방법

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.

노력하다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

이 코드는 Todd Motor(Google Developer Expert)가 상위 구성 요소 또는 앱 구성 요소의 경로 데이터에 액세스하기 위해 작성했습니다.아주 잘 작동합니다.

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

constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(() => this.route),
    map(route => {
      while (route.firstChild) route = route.firstChild
      return route
    }),
    filter(route => route.outlet === 'primary'),
    mergeMap(route => route.data)
  ).subscribe(data =>
    console.log('data', data)
  )
}

참조: https://ultimatecourses.com/blog/dynamic-page-titles-angular-2-router-events

이 예제에서는 경로 데이터를 사용하여 앱 구성 요소에서 페이지 제목을 설정하고 있습니다.

부모의 경로 데이터에 액세스하는 것이 왜 그렇게 복잡한지 나는 결코 알 수 없습니다!

아래와 같이 라우터 개체를 사용하여 정적으로 라우팅한 경우:

{
  path: '',
  pathMatch: 'full',
  component: NameComponent,
  data: { variableName: 'variableValue' }
},

OnOnInit()에서 ActiveRoute 개체를 사용하여 라우터 정의에서 전달한 데이터를 복구할 수 있습니다.

ngOnInit() {
  this.localVariable = this.route.snapshot.data['variableName'];
}

Obs: 저는 Angular 5를 사용하고 있습니다!

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 { AppRoutingService } from "../../shared/services/app-routing.service";

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

  constructor(private router: Router, private appRoutingService: AppRoutingService ) { }

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

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

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

내 경우 각도 8에 대한 이 작업:

onActivate(outlet)에<router-outlet>경로가 활성화될 때마다 자동으로 호출됩니다.

html로

<router-outlet (activate)='onActivate(outlet)' #outlet="outlet"></router-outlet>

구성 요소로

onActivate(outlet: RouterOutlet) {
    outlet.activatedRoute.data.pipe(map(data => console.log('Router data', data))).toPromise().then();
  }

가져오기를 잊지 마십시오.

import {RouterOutlet} from '@angular/router';
import {map} from 'rxjs/operators';

ngAfterView까지 기다릴 의향이 있는 경우Init 이벤트에서 viewchild를 사용하여 라우터 아울렛에 연결할 수 있습니다.

예.

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

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

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

언급URL : https://stackoverflow.com/questions/43512695/how-to-get-route-data-into-app-component-in-angular-2