Jak uzyskać aktualne dane niestandardowe trasy w kanciastym 2?

Question

mam skonfigurować trasy jest jak poniżej

const appRoutes: Routes = [ 
    { 
    path: 'login', 
    component: LoginComponent, 
    data: { 
     title: 'Login TTX' 
    } 
    }, 
    { 
    path: 'list', 
    component: ListingComponent, 
    data: { 
     title: ' TTX Home Page', 
     module:'list' 
    } 
    }, 
    { 
    path: '', 
    redirectTo: '/login', 
    pathMatch: 'full' 
    }, 
]; 

Teraz, kiedy przychodzą do '/list' trasie następnie na 'listing.component.ts' Pisałem poniżej kod

export class ListingComponent { 

    public constructor(private router:Router) { 
     //here how i can get **data** of **list** routes 

    } 
} 

Answer 1

public constructor(private route:ActivatedRoute, private router:Router) { 
     console.log(route.snapshot.data['title']); 
    } 

Answer 2

Po testowałem różne rozwiązania, kątowe Odpowiedź grupy wsparcia faktycznie rozwiązała ten problem ładnie.

ActivatedRoute doesn't carry data, a tu jest rozwiązanie do wykrywania zmiennej strony w ramach data: { page: 'login' }.

import { Router, RoutesRecognized } from '@angular/router'; 

export class AppComponent { 
    page = ''; 
    constructor(private router: Router) { 
    // listen to page variable from router events 
    router.events.subscribe(event => { 
     if (event instanceof RoutesRecognized) { 
     let route = event.state.root.firstChild; 
     this.page = 'page-' + route.data.page || ''; 
     console.log('Page', this.page); 
     } 
    }); 
    } 
} 

Answer 3

kątowego 4+

Jeśli umieścić następujący kod w macierzystym lub poziom górny komponentów takich jak AppComponent to nie będzie działać. To działa tylko na dzieci lub niższy poziom składników, dla których już zdefiniowane dane niestandardowej trasy:

public constructor(private route:ActivatedRoute, private router:Router) { 
     console.log(route.snapshot.data['title']); 
    } 

Tak więc, jeśli chcesz uzyskać dostęp do danych niestandardowych trasa globalnie od składnika dominującego lub poziom górny, aby uzyskać dostęp do zmiany w niestandardowych danych trasy musisz słuchać zdarzeń routera, w szczególności zdarzeń RoutesRecognized lub NavigationEnd. Pokażę dwie procedury z AppComponent z dwóch zdarzeń:

Pierwsze podejście:

export class AppComponent implements OnInit, AfterViewInit { 

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

    ngOnInit() { 
     this.router 
     .events 
     .filter(event => event instanceof NavigationEnd) 
     .map(() => { 
      let child = this.activatedRoute.firstChild; 
      while (child) { 
      if (child.firstChild) { 
       child = child.firstChild; 
      } else if (child.snapshot.data && child.snapshot.data['custom_data']) { 
       return child.snapshot.data['custom_data']; 
      } else { 
       return null; 
      } 
      } 
      return null; 
     }).subscribe((customData: any) => { 
      console.log(customData); 
     }); 
    } 
} 

Drugie podejście wykorzystuje:

this.router.events 
.filter(event => event instanceof RoutesRecognized) 
.map((event: RoutesRecognized) => { 
    return event.state.root.firstChild.data['custom_data']; 
}) 
.subscribe(customData => { 
    console.log(customData); 
}); 

Uwaga: Chociaż ostatnia jeden jest krótszy i zwykle działa, ale jeśli masz zagnieżdżone trasy, zachęcamy do skorzystania z pierwszego.

Answer 4

ten pracował dla mnie w app.component.ts (ng 5)

constructor(
    private router: Router, 
) { 

router.events.subscribe((routerEvent: Event) => { 
     this.checkRouterEvent(routerEvent); 
    }); 
} 

checkRouterEvent(routerEvent: Event): void { 
    if (routerEvent instanceof ActivationStart) { 
     if (routerEvent.snapshot.data.custom_data) { 
      this.currentpage = routerEvent.snapshot.data['custom_data']; 
      console.log('4.' + this.currentpage); 
     } 

    }