web-dev-qa-db-fra.com

Comment changer le titre de la page avec le routage dans l'application Angular?

Existe-t-il un module npm/autre moyen comme React-Helmet qui nous permet de changer le titre de la page pendant que nous parcourons notre application Angular?

PS: J'utilise Angular 5.

angularangular5
10
Vishal Gulati

Vous avez un TitleService dans Angular 5. Injectez-le dans le constructeur de votre composant et utilisez la méthode setTitle().

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

....

constructor(private titleService:Title) {
  this.titleService.setTitle("Some title");
}

Voici les documents d'Angular: https://v2.angular.io/docs/ts/latest/cookbook/set-document-title.html

27
John

C'est la bonne façon d'utiliser

export class AppComponent implements OnInit {
  constructor(private router: Router, private titleService: Title) {
  }

  ngOnInit() {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.router)
      .subscribe((event) => {
          const title = this.getTitle(this.router.routerState, this.router.routerState.root).join(' | ');
          this.titleService.setTitle(title);
        }
      );

  }

  getTitle(state, parent) {
    const data = [];
    if (parent && parent.snapshot.data && parent.snapshot.data.title) {
      data.Push(parent.snapshot.data.title);
    }

    if (state && parent) {
      data.Push(... this.getTitle(state, state.firstChild(parent)));
    }
    return data;
  }


}
8
iman

vous pouvez faire ci-dessous app.component.html

<div class="content">
  <h1>Set Title in Angular of Website</h1>
  <a  (click) ="setTitleHome()">Home</a>
  <a  (click) ="setTitleLogin()">Login</a>
  <a  (click) ="setTitleRegister()">Register</a>
</div>

after change title dans le fichier app.component.ts

constructor(private serviceTitle: Title, private router:Router){

  }
  setTitleHome(){
    this.serviceTitle.setTitle("Home");
    this.router.navigateByUrl("/home");
  }
  setTitleLogin(){
    this.serviceTitle.setTitle("Login" +" | " +this.title);
    this.router.navigateByUrl("/login");
  }
  setTitleRegister(){
    this.serviceTitle.setTitle("Register" +" | " +this.title);
    this.router.navigateByUrl("/register");
  }

Il s'agit du lien de référence: https://code-Android-example.blogspot.com/2019/08/how-to-set-title-in-angular-of-website.html

0
Tienanhvn

Je préférerais ajouter une classe wrapper juste pour m'assurer que je ne changerai pas partout si import {Title} de "@ angular/platform-browser"; changé dans la prochaine version :) ... Peut-être quelque chose appelé "AppTitleService"

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

@Injectable({ providedIn: 'root' })
export class AppTitleService {

    constructor(private titleService: Title) { }

    getTitle() {
        this.titleService.getTitle();
    }
    setTitle(newTitle: string) {
        this.titleService.setTitle(newTitle);
    }
}
0
bunjeeb