How to get Route data into App Component in Angular 2

前端 未结 6 1033
青春惊慌失措
青春惊慌失措 2020-12-10 02:19

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

    const appRoutes:Routes = [
  {path: \'\', component: LoginComponent, data:[{PageName:         


        
相关标签:
6条回答
  • 2020-12-10 02:26

    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 { 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();
      }
    }
    
    0 讨论(0)
  • 2020-12-10 02:30

    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>

    0 讨论(0)
  • 2020-12-10 02:33
    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();
     }
    
    0 讨论(0)
  • 2020-12-10 02:39

    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!

    0 讨论(0)
  • 2020-12-10 02:42

    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!

    0 讨论(0)
  • 2020-12-10 02:51

    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

    0 讨论(0)
提交回复
热议问题