Comment exécuter une fonction lorsqu'une route change dans angular ?

Question

Je veux changer un certain titre en fonction de l'url actuelle dans Angular. Le fichier component.ts ressemble donc à ceci :

import {Router} from '@angular/router';
//code
public name: string
constructor(
    public router: Router
  ) {}
getName()
{
if(this.router.url === "/some_list")
{this.name = "List"}
else if(this.router.url === "/detail")
{this.name = "Detail"}
}

Et puis

<a>{{this.name}}</a>

Les réponses existantes, comme Comment détecter un changement d'itinéraire dans Angular ? n'a pas pu me dire comment faire quelque chose après un changement dans le routage (changement = vrai ou faux). Donc, comment puis-je exécuter cette fonction chaque fois que l'url change, de sorte que l'en-tête soit conforme à la vue actuelle ?

Answer 1

Vous pouvez subscribe a router event dans le app.component.ts . Il se déclenchera chaque fois que vous modifierez le route .

  constructor(location: Location, router: Router) {
    // decide what to do when this event is triggered.
    router.events.subscribe(val => {
      if (location.path() != "/something") {
          // do something
      } else {
         // do something else
      }
    });
  }

---

Essayez ceci s'il appelle plusieurs fois

router.events.filter(event => event instanceof NavigationEnd).subscribe(val => { // here your code... })

Note : Je n'ai pas essayé cette méthode

---

Answer 2

Allez-y Lien StackBlitz

Sur chaque événement de début de navigation du routeur, vous pouvez obtenir l'url et déclencher la fonction. dans votre app.component.ts

ngOnInit(){
   this.router.events.subscribe(event =>{
      if (event instanceof NavigationStart){
         console.log(event.url)
         this.routerChangeMethod(event.url);
      }
   })
}

routerChangeMethod(url){
  this.title = url;
}

Yout app.component.html est

{{title}}

<router-outlet></router-outlet>

Answer 3

En guise de bonne pratique, vous devriez avoir un composant par itinéraire .

RouterModule.forRoot([
    { path: 'products', component: DetailComponent },
    { path: 'shopping-cart', component: SomelistComponent }
])

Si vous vous en tenez à cette pratique, vous obtiendrez une séparation des préoccupations.

Ensuite, en fonction de la route, vous venez de définir l'en-tête de votre composant.

Vous pouvez en savoir plus sur routage ici.

Answer 4

Essayez comme ceci :

Démonstration de travail

.html

<a routerLinkActive="active" routerLink="/some_list">Home</a> |
<a routerLinkActive="active" routerLink="/detail">Catalog</a>

<router-outlet (activate)="getName()"></router-outlet>

.ts

getName() {
  if (this.router.url.includes("some_list")) {
      this.name = "some_list";
  } else if (this.router.url.includes("detail")) {
      this.name = "detail";
  }
  alert(this.name);
}