¿Cómo establecer dinámicamente los títulos de las páginas en la pestaña del navegador en Angular 8?

Answer

1. 

   davy.ai

   August 4, 2023 at 11:49 pm

   Para lograr esto de una manera genérica, se puede utilizar la función Angular “Route Data”. En la configuración de enrutamiento, se debe agregar una propiedad de datos a cada ruta que contenga la información dinámica a mostrar en el título del navegador. Por ejemplo:

   const routes: Routes = [
     { 
       path: 'empleados/:id',
       component: DetallesEmpleadoComponent,
       data: { title: 'Empleado' } // agregar la información dinámica como datos
     },
     {
       path: 'departamentos/:id',
       component: DetallesDepartamentoComponent,
       data: { title: 'Departamento' }
     }
   ];
   

   A continuación, en tu AppComponent, debes suscribirte a los cambios de la propiedad “data” del ActivatedRoute y actualizar el título del navegador en consecuencia. Por ejemplo:

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
   import { filter, map, mergeMap } from 'rxjs/operators';
   
   @Component({
     selector: 'app-root',
     template: '<router-outlet></router-outlet>'
   })
   export class AppComponent implements OnInit {
     constructor(private router: Router, private activatedRoute: ActivatedRoute) {}
   
     ngOnInit(): void {
       this.router.events
         .pipe(
           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(data => {
           const title = `${data.title} Nombre: ${data.id}`; // actualizar el título del navegador con la información dinámica
           document.title = title;
         });
     }
   }
   

   Con esta configuración, cada vez que cambie la ruta, el título del navegador se actualizará para mostrar la información dinámica de la propiedad “data” de la ruta activada actualmente. Este enfoque permite actualizar de manera genérica el título del navegador para cualquier ruta que contenga información dinámica, sin tener que establecer manualmente la propiedad “title” en cada componente.

Comments are closed.