En la entrada de hoy vamos a ver como podemos hacer esto en Angular4. Para ello crearemos una aplicación con unas pocas rutas, y cambiaremos el título y las metatags asociadas a dicha página o componente.
Para empezar vamos a definir algunas rutas para que cuando se acceda a la ruta correspondiente y se cargue el componente definido se muestre el título y los metatags especificados en la propia ruta mediante el objeto "data".
A la propiedad data podemos asignar un objeto json con la estructura que queramos definir. En nuestro ejemplo el data va a contener unicamente el título que queremos mostrar, aunque lógicamente podriamos definir otras propiedades como una descripción, por ejemplo.
La definición por tanto de nuestras rutas (app.routes.ts), con 3 componentes (helloCOmponent, InfoComponent, y LoginComponent) es el siguiente:
Como podemos observar, a cada ruta hemos asignado un parámetro"data" con un título para cada ruta.
El objetivo es cambiar los metadata y el título en base a la ruta en la que nos encontremos, luego lo primero que tenemos que hacer es obtener la propiedad "data" de la ruta donde nos encontramos actualmente. Eso lo conseguimos recorriendo la coleccion "events" de router. Como en realidad sólo nos interesa los eventos de tipo ActivationEnd, y más concretamente el primero de ellos, haremos:
this.router.events
.filter(event => event instanceof ActivationEnd &&
event.snapshot.firstChild === null
)
Todo esto lo vamos a poner dentro de un método que llamaremos getRouteData en un servicio que llamaremos MetatagService. Como sólo nos interesa el objeto "data" lo "mapeamos" con el operador map. El método tiene el siguiente aspecto:
Tanto el título como las metadata las podemos establecer haciendo uso de la librería platform-browser de Angular el cual es un paquete que contiene las características que hacen posible la ejecución de una aplicación angular en el navegador.
Para cambiar el título podemos establecer el objeto Title mediante el método setTitle de manera similar a:
this.title.setTitle = data.titulo;
Para cambiar las metadatas tenemos que definir un objeto de tipo MetaDefinition.
Este tipo es un objeto json al que le pasamos el nombre (name) de la etiqueta meta y el contenido (content) que queremos establecer:
En el siguiente ejemplo estaríamos definiendo el metatag "description" con el valor del título establecido en el parametro data.
const metaTag: MetaDefinition = {
name: 'description',
content: data.titulo
};
Para actualizar el contenido de las meta haremos uso del método update. En el siguiente ejemplo obtenemos la ruta activa y establecemos la metatag con el título del data obtenido:
this.metatagService.getRouteData()
.subscribe(
data => {
console.log(data);
this.title.setTitle = data.titulo;
const metaTag: MetaDefinition = {
name: 'description',
content: data.titulo
};
this.metatagService.updateMeta(metaTag);
}
);
El resultado una vez que accedemos a la ruta correspondiente es similar al que se muestra en el siguiente pantallazo:
El objetivo de este artículo era demostrar cómo es muy sencillo cambiar el título y las metatags de manera dinámica haciendo uso de los métodos del platform-browser de Angular.
Espero haberlo conseguido...
Código fuente: https://cambiar-titulo-y-metatags-dinamicamente.stackblitz.io
No hay comentarios:
Publicar un comentario