J'ai défini certaines données de route dans mon module de routage d'application comme ci-dessous:
const appRoutes:Routes = [
{path: '', component: LoginComponent, data:[{PageName:"Login Page"}]}]
Je souhaite obtenir les données globalement et j'utilise app.component.ts pour obtenir les informations relatives à la redirection des URL, comme indiqué ci-dessous:
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
}
J'ai essayé d'injecter ActivatedRoute mais cela ne se met pas à jour après chaque redirection.
Y at-il quand même, où je peux configurer le nom de la page et l’obtenir dans le app.component.ts
global.
Essayez de filter
et de boucler vos événements au lieu de subscribe
constructor(router:Router, route:ActivatedRoute) {
router.events
.filter(e => e instanceof NavigationEnd)
.forEach(e => {
this.title = route.root.firstChild.snapshot.data['PageName'];
});
}
Veuillez vérifier la démo de travail suivante: https://plnkr.co/edit/rBToHRaukDlrSKcLGavh?p=info
Si vous aviez un routage statique à l'aide d'un objet routeur, comme ci-dessous:
{chemin: '', cheminMatch: 'complet', composant: NomComposant, données: {nomVariable: 'valeurValeur'}},
Sur ngOnInit (), vous pouvez utiliser l'objet ActivatedRoute pour récupérer les données que vous avez transmises à partir de la définition du routeur:
ngOnInit () { this.localVariable = this.route.snapshot.data ['NomVariable']; }
Obs: J'utilise Angular 5!
Pour Angular 5+
Ce service récupère les données sur l'itinéraire actuel: (dans mon cas, "titre")
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;
}
}
}
Logique des composants:
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();
}
}
Si vous êtes prêt à attendre l'événement ngAfterViewInit, vous pouvez vous connecter à la prise du routeur à l'aide de viewchild.
c'est à dire.
@ViewChild('router')
private routerOutlet: RouterOutlet;
ngAfterViewInit() {
this.routerOutlet.activateEvents
.pipe(
map(() => this.routerOutlet
.activatedRouteData
)
)
.subscribe((data) => {
// Code
});
}
<router-outlet #router="outlet"></router-outlet>