sábado, 23 de junio de 2018

Añadir etiquetas metas en angular 6

Ya que las etiquetas meta no vienen muy bien explicado en la documentación de angular 6, he decidido subir un ejemplo de como añadir estas etiquetas en nuestro proyecto de angular 6. Se puede hacer como siempre se ha hecho, añadiéndolas en el index.html, pero nos encontramos con un problema, que todos los componentes tendrán las mismas etiquetas.

Así que lo mejor es subirlas como indica angular, en el fichero typescript.

Yo en el ejemplo del que me guié, incrustaba el código en el app.component.ts, así que así lo hice yo:

Aquí teneis el código para el que le sirva de ayuda:


import { Component, OnInit } from '@angular/core';
import {Meta, Title} from '@angular/platform-browser';
import {NavigationEnd, Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  constructor(
    private _title: Title,
    private meta: Meta,
    private router: Router
  ) {}

  ngOnInit() {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        switch (event.urlAfterRedirects) {
          case '/':
            this.meta.addTag({
              name: 'description',
              content: 'contenido de la descripcion'
            });
            break;
          case '/pagina-1':
            this._title.setTitle('titulo');
            this.meta.addTag({
              name: 'description',
              content: 'contenido de la descripcion'
            });
            this.meta.addTag({
              name: 'keywords',
              content: 'palabras claves'
            });
            break;
            case '/pagina-2':
            this._title.setTitle('titulo');
            this.meta.addTag({
              name: 'description',
              content: 'contenido de la descripcion'
            });
            this.meta.addTag({
              name: 'keywords',
              content: 'palabras clave'
            });
            break;
            case '/pagina-3':
            this._title.setTitle('titulo');
            this.meta.addTag({
              name: 'description',
              content: 'contenido'
            });
            this.meta.addTag({
              name: 'keywords',
              content: 'palabras claves'
            });
            break;
        }
      }
    });
  }
}

Espero que os sirva de ayuda, sobre todo para los que se están iniciando en angular.

No hay comentarios:

Publicar un comentario