How to get Route data into App Component in Angular 2

问题

I have defined some route data in my app routing module like below:

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

I want to get the data globally so that I can use appRoutes in app.component.ts to get the URL redirection related information as below:

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
      }

I tried injecting ActivatedRoute but it's not getting updated after each redirection.

Is there anyway, where I can configure page name and get it in global app.component.ts.

回答1:

Try to filter and loop your events instead of subscribe

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

Please check the following working demo: https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info

回答2:

If you had statically routed using Router object like below:

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

On ngOnInit() you can use ActivatedRoute object to recover the data you passed from Router definition:

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

Obs: I am using Angular 5!

回答3:

For Angular 5+

This service retrieves data on the current route: (in my case "title")

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

Component Logic:

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

回答4:

If you are willing to wait until the ngAfterViewInit event you can link to the router outlet using viewchild.

i.e.

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

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

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

回答5:

This code was written by Todd Motto (Google Developer Expert) to access route data in a parent component or app component. Works like a gem.

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

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

In his example he is using route data to set the page title in app component.

Why accessing route data in a parent is so complicated I'll never know!

回答6:

export class AppComponent implements OnInit, OnDestroy{
  title = 'Welcome';
  private paramsSubscription;

  constructor(public router: Router,
              private activatedRoute: ActivatedRoute,
              public authenticationService: AuthenticationService) {}


public ngOnInit() {
     this.paramsSubscription = this.activatedRoute.params
      .subscribe((params) => {
        console.log("Page Name", params['PageName']);
      }        
 }

// Unsubscribe route params to avoid memmory leaks
public ngOnDestroy() {
     this.paramsSubscription.unsubscribe();
 }

来源：https://stackoverflow.com/questions/43512695/how-to-get-route-data-into-app-component-in-angular-2