Cómo utilizar el servicio Meta de Angular para obtener, agregar, actualizar y eliminar información

Introducción

El servicio Meta de Angular le permite obtener o configurar diferentes metaetiquetas según la ruta activa actual en su aplicación.

Nota: El servicio Angular Meta está disponible para Angular 4 y versiones posteriores.

Repasemos su uso y los métodos disponibles.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Cierta familiaridad con elementos HTMLmeta .
• Alguna familiaridad con los servicios angulares .

Este tutorial fue verificado con Node v16.2.0, npmv7.15.1 y angularv12.0.3.

Usando addTagyaddTags

Para utilizar el servicio Meta es necesario importarlo @angular/platform-browsere inyectarlo en un componente o servicio.

import { Meta } from '@angular/platform-browser';

Con múltiples metaetiquetas, puedes usar el addTagsmétodo para configurarlas todas en la misma llamada.

A continuación se muestra un ejemplo en el que agregamos metaetiquetas para una tarjeta de Twitter cuando se carga el componente:

constructor(private meta: Meta) {  this.meta.addTags([    { name: 'twitter:card', content: 'summary_large_image' },    { name: 'twitter:site', content: '@alligatorio' },    // ...  ]);}

Este código producirá el siguiente resultado en la página:

Outputmeta name="twitter:card" content="summary_large_image"meta name="twitter:site" content="@alligatorio"

Tenga en cuenta que tanto addTagcomo addTagspueden tomar un segundo argumento booleano para indicar si la etiqueta debe crearse incluso si ya existe.

Aquí, por ejemplo, la etiqueta se agregará dos veces:

constructor(private meta: Meta) {    this.meta.addTags([      { name: 'twitter:site', content: '@alligatorio' },      { name: 'twitter:site', content: '@alligatorio' }    ], true);  }}

Este código producirá el siguiente resultado en la página:

Outputmeta name="twitter:site" content="@alligatorio"meta name="twitter:site" content="@alligatorio"

addTagy addTagsle permitirá agregar nuevas metaetiquetas.

Usando getTagygetTags

De manera análoga a los métodos addTagy addTags, también existen los métodos getTagy getTags.

Consideremos una aplicación con la siguiente metaetiqueta:

meta name="viewport" content="width=device-width, initial-scale=1"

He aquí un ejemplo de cómo getTagse puede utilizar:

constructor(private meta: Meta) {  const viewport = this.meta.getTag('name=viewport');  if (viewport) console.log(viewport.content);}

El contenido se enviará a la consola.

Outputwidth=device-width, initial-scale=1

getTagtoma una cadena de selector de atributos y devuelve un HTMLMetaElement. getTagstambién toma un selector de atributos, pero devuelve una matriz con potencialmente múltiples HTMLMetaElementsque coinciden con el selector.

UsandoupdateTag

Dada una nueva metadefinición de etiqueta y un selector, el updateTagmétodo actualizará cualquier etiqueta que coincida con el selector.

En el siguiente ejemplo, un tanto artificial, primero establecemos una metaetiqueta con un contentof summary_large_imagey luego la actualizamos a solo summary:

constructor(private meta: Meta) {  this.meta.addTag(    { name: 'twitter:card', content: 'summary_large_image' }  );  this.meta.updateTag(    { name: 'twitter:card', content: 'summary' },    `name='twitter:card'`  );}

En una aplicación real, probablemente desearías actualizar metalas etiquetas que están presentes globalmente en la aplicación, pero que deberían tomar valores diferentes según la ruta activa.

Usando removeTagyremoveTagElement

El removeTagmétodo toma una cadena para un selector de atributos y elimina la etiqueta.

Consideremos una aplicación con la siguiente metaetiqueta:

meta charset="utf-8"

No es que quieras hacer esto alguna vez, pero aquí tienes cómo puedes eliminar la charset metaetiqueta:

constructor(private meta: Meta) {  this.meta.removeTag('charset');}

Es removeTagElementsimilar, pero toma un HTMLTagElementselector directo en lugar de uno de cadena.

Aquí tenemos el mismo ejemplo, pero aquí primero obtenemos el charset metaelemento de etiqueta:

constructor(private meta: Meta) {  const charsetTag = this.meta.getTag('charset');  if (charsetTag) this.meta.removeTagElement(charsetTag);}

Ambos enfoques eliminarán el metaelemento.

Conclusión

En este artículo, aprendió a usar el servicio Meta de Angular para obtener, agregar, actualizar y eliminar metaetiquetas.

Continúe su aprendizaje con nuestra guía sobre cómo actualizar el título de la página de forma declarativa usando ngrx.