He definido algunos datos de ruta en el módulo de enrutamiento de mi aplicación, como se muestra a continuación:
const appRoutes:Routes = [ {path: '', component: LoginComponent, data:[{PageName:"Login Page"}]}]Quiero obtener los datos globalmente para poder usar appRoutes en app.component.ts para obtener la información relacionada con la redirección de URL como se muestra a continuación:
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 }Intenté inyectar ActivatedRoute pero no se actualiza después de cada redirección.
¿Existe de todos modos, donde puedo configurar el nombre de la página y obtenerlo en app.component.ts global?
Intenta filter y repetir tus eventos en lugar de subscribe
constructor(router:Router, route:ActivatedRoute) { router.events .filter(e => e instanceof NavigationEnd) .forEach(e => { this.title = route.root.firstChild.snapshot.data['PageName']; }); }Consulte la siguiente demostración de trabajo: https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info
Si hubiera enrutado estáticamente usando el objeto Router como se muestra a continuación:
{ path: '', pathMatch: 'full', component: NameComponent, data: { variableName: 'variableValue' } },En ngOnInit() puede usar el objeto ActivatedRoute para recuperar los datos que pasó de la definición del enrutador:
ngOnInit() { this.localVariable = this.route.snapshot.data['variableName']; }Obs: ¡Estoy usando Angular 5!
Este código fue escrito por Todd Motto (experto en desarrollo de Google) para acceder a los datos de la ruta en un componente principal o componente de la aplicación. Funciona como una joya.
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) ) }Ver: https://ultimatecourses.com/blog/dynamic-page-titles-angular-2-router-events
En su ejemplo, está usando datos de ruta para configurar el título de la página en el componente de la aplicación.
¡Nunca lo sabré por qué acceder a los datos de la ruta en un padre es tan complicado!