web-dev-qa-db-fra.com

l'ajout / la mise à jour de balises META ne fonctionne pas dans angular5

J'ai utilisé le code ci-dessous pour ajouter ou mettre à jour des balises META lors de l'exécution dans angular5

import { Title ,Meta} from '@angular/platform-browser'; 
constructor( private meta:Meta)
 {
 this.meta.addTags([
            {name: 'description', content: 'How to use Angular 4 meta 
       service'},
            {name: 'author', content: 'talkingdotnet'},
            {name: 'keywords', content: 'Angular, Meta Service'}
          ]);
this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service' 
 });
  }

méta service importé dans appmodule

Mais cela ne fonctionne pas (pas dans ma page source) .Personne, aidez-moi

Merci

javascriptangularangular5
16
kamalav

Vous devez simplement changer:

this.meta.updateTag({ content: 'Angular 4 meta service'} , 'name="description"' );

DEMO DE TRAVAIL (Au lieu de vérifier la source de la page via l'élément inspect) La raison est expliquée ci-dessous

Votre méthode fonctionne également à 100%, vous pouvez le vérifier dans ma démo donnée.

Angular n'est pas servi du côté serveur, c'est pourquoi vous pouvez voir toutes les balises META via la source de vue de page, tout ce qui est modifié après le chargement de la page qui ne sera pas affiché dans la source de vue de page

Si vous souhaitez vérifier les balises META mises à jour, vous devez inspecter l'élément et y vérifier

Si vous souhaitez effectuer un rendu côté serveur, vous pouvez opter pour niversal angulaire

16
Vivek Doshi

Veuillez essayer d'utiliser ce modèle

import { Component } from '@angular/core';
import { Title, Meta, MetaDefinition } from '@angular/platform-browser';

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

  public constructor(public meta: Meta, public pageTitle: Title) {
    pageTitle.setTitle("MySite.COM");
    const keywords: MetaDefinition = {
      name: "keywords",
      content: "angular2, Java, javaEE, angular-universal"
    }
    const description: MetaDefinition = {
      name: "description",
      content: "This is a description"
    }
    this.meta.addTags([keywords, description]);
  }

  title = 'app';
}

Reportez-vous rl pour plus de mises à jour

3
deepak thomas

Utilisez simplement addTags. updateTags est pour les balises existantes.

Avec juste addTags

this.meta.addTags([
  {name: 'description', content: 'How to use Angular 4 meta service'},
  {name: 'author', content: 'talkingdotnet'},
  {name: 'keywords', content: 'Angular, Meta Service'}
]);

Vous obtenez les éléments suivants:

enter image description here

De plus, avec updateTag, notez le changement de description:

this.meta.addTags ([{name: 'description', content: 'How to use Angular 4 meta service'}, {name: 'author', content: 'talkdotnet'}, {nom: 'mots clés', contenu: 'Angular, Meta Service'}]);

this.meta.updateTag ({nom: 'description', contenu: 'Angular 4 meta service'});

enter image description here

1
bhantol

Angular a une fonction de sécurité qui n'affichera que le contenu de la page fourni dans le fichier index.html. Une façon de voir cela est d'inspecter votre code sur la même page. Vous pourrez voir vos balises META et ses valeurs. Une autre solution consiste à utiliser Angular Universal qui est utile à des fins de référencement. En utilisant Angular universal, vous pourrez voir le contenu de votre page dans la source d'affichage.

0
parth