Comment modifier le titre d'une page à l'aide angulaire(angulaire 2 ou 4) de route?

Je veux changer le titre de la page chaque fois que je clique ou parcourir le lien de la barre d'URL. Comment changer cela en utilisant Angulaire de la route?
Je suis angulaire à l'aide de la version 4 et angulaire de la cli.

Comment changer cela en utilisant Angulaire de la route?</j'> Par la recherche pour "changer le titre de la page angular2".
Double Possible de comment modifier le titre de la page dans angular2 routeur
Merci, mais que le code ne fonctionnait pas, ou alors je n'ai pas réussi à la mettre dans mon code.
Puis de présenter ce que vous avez fait, et de quelle manière particulière qu'il n'a pas de travail, et/ou en ce que particulier, vous n'étiez pas en mesure de mettre dans votre code.

OriginalL'auteur Shakti | 2017-05-16

  1. 13

    Vous pouvez utiliser @angular/platefor-browser d'utiliser le setTitle():

    import { Title } from '@angular/platform-browser';

@Component({
  selector: 'your-component',
})

export class YourComponent implements onInit {
  constructor(private title: Title) {}

 ngOnInit() {
     this.title.setTitle('Title for this component');
 }

}
    Travail Donc EZ Merci !
    Il peut ne pas être liés à cette question, est-il un moyen de le modifier avant de le rediriger vers d'autres pages autres que setTitle dans toutes les autres pages? Depuis ce changement sera conservé après la sortie de cette page.

    OriginalL'auteur Shubham Verma

  2. 13

    vous devez passer "titre" comme des données à votre itinéraire

    const routes: Routes = [{
  path: 'calendar',
  component: CalendarComponent,
  children: [
    { path: '', redirectTo: 'new', pathMatch: 'full' },
    { path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } },
    { path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } },
    { path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } }
  ]
}];

    Ensuite ce faire importations dans votre Composant:

    import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

    Une fois importés, on peut les injecter à la fois:

    @Component({
  selector: 'app-root',
  templateUrl: `
    <div>
      Hello world!
    </div>
  `
})
export class AppComponent {
  constructor( private router: Router,
               private activatedRoute: ActivatedRoute,
               private titleService: Title) {}
}

    De mettre à jour le titre d'une page statique, il suffit de l'appeler setTitle:

    ngOnInit() {
     this.router.events
        .filter((event) => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map((route) => {
            while (route.firstChild) route = route.firstChild;
            return route;
        })
        .filter((route) => route.outlet === 'primary')
        .mergeMap((route) => route.data)
        .subscribe((event) => {
            let title = 'Default Title Here'
            if(event['title']) {
                title = event['title'];
            }
            this.titleService.setTitle(title);
        });
}
    Merci pour la réponse. Mais je veux savoir, est-ce le code complet pour changer le titre? Je l'ai fait mais je n'était pas en mesure de modifier le titre. Comme je suis un débutant dans angulaire, pouvez-vous m'envoyer le code complet?
    ok, sûr que je vais écrire très bientôt
    consultez la rubrique suivante pour le code complet: toddmotto.com/dynamic-page-titles-angular-2-router-events
    -1: Le data: { title: '...'} n'est pas utilisé dans cet exemple et afin de ne pas répondre directement à la question. Semble comme un rapide copier-coller à partir du lien @JKing fourni
    -1 aussi. Au moins donner du crédit lorsque vous copiez collé cette réponse. toddmotto.com/dynamic-page-titles-angular-2-router-events

    OriginalL'auteur Houtan