web-dev-qa-db-fra.com

Comment changer le titre d'une page en utilisant un itinéraire angulaire (angulaire 2 ou 4)?

Je souhaite modifier le titre de la page chaque fois que je clique ou que je parcours le lien dans la barre d'URL. Comment changer cela en utilisant Angular route? J'utilise angular version 4 et angular cli.

angularangular-ui-routerangular-cli
20
Shakti

Vous pouvez utiliser @angular/platefor-browser Pour utiliser la 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');
 }

}
17
Shubham Verma

vous devez transmettre le "titre" en tant que 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' } }
  ]
}];

Faites ensuite ces 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, nous pouvons les injecter tous les deux:

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

Pour mettre à jour un titre de page statiquement, nous pouvons simplement appeler setTitle comme ceci:

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);
        });
}
12
Houtan