¿Cómo cambiar el título de la página con enrutamiento en la aplicación Angular?

Hola, descubrimos la solución a tu pregunta, has scroll y la obtendrás a continuación.

Solución:

Tiene un TitleService en Angular 5. Inyéctelo en el constructor de su componente y use el setTitle() método.

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

....

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

Aquí están los documentos de Angular: https://v2.angular.io/docs/ts/latest/cookbook/set-document-title.html

Esta es la forma correcta de usar

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

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

  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;
  

Aquí hay una forma probada de establecer el título de la página en Angular 8, pero también puede usarlo en Angular 5. Una vez que configure esto, solo debe configurar el título en el archivo de ruta y todo se configurará automáticamente.

import  Component  from '@angular/core';
import  ActivatedRoute, Router, NavigationEnd  from '@angular/router';
import  Title  from '@angular/platform-browser';
import  filter, map  from "rxjs/operators";

@Component(
    selector: 'app-root',
    templateUrl: './app.component.html'
)
export class AppComponent 

    constructor (private router: Router, private activatedRoute:    ActivatedRoute, private titleService: Title) 
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd),
            map(() => 
                let child = this.activatedRoute.firstChild;
                while (child) 
                    if (child.firstChild) 
                        child = child.firstChild;
                     else if (child.snapshot.data &&    child.snapshot.data['title']) 
                        return child.snapshot.data['title'];
                     else 
                        return null;
                    
                
                return null;
            )
        ).subscribe( (data: any) => 
            if (data) 
                this.titleService.setTitle(data + ' - Website Name');
            
        );
    

Y en el archivo de ruta puedes hacer algo como esto:

const routes: Routes = [
    
        path: 'dashboard',
        component: DefaultDashboardComponent,
        data: 
            title: 'Dashboard'
        
    
];

---

---

Utiliza Nuestro Buscador