Добавление/обновление мета-тегов, не работающих в угловом5

Я использовал ниже код для добавления или обновления метатег во время выполнения в угловом5

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' 
 });
  }

импортированная мета-служба в appmodule

Но он не работает (не в моем источнике страницы).может ли кто-нибудь мне помочь?

Спасибо

Ответ 1

Вам нужно просто изменить:

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

РАБОЧАЯ ДЕМО (вместо проверки источника страницы просмотра через элемент проверки) Причина объясняется ниже

Ваш метод также работает на 100% отлично, вы можете проверить это в моей данной демонстрации.

Угловая сторона не обслуживается со стороны сервера, поэтому вы можете видеть любые метатеги через источник просмотра страницы, любую вещь, которая изменяется после загрузки страницы, которая не будет отображаться в источнике просмотра страницы

Если вы хотите проверить обновленные метатеги, вам нужно проверить элемент и проверить там

Если вы хотите рендеринг на стороне сервера, то вы можете пойти на Angular Universal

Ответ 2

Попробуйте использовать этот шаблон

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';
}

Обратитесь url для получения дополнительных обновлений

Ответ 3

Просто используйте addTags. updateTags для существующих тегов.

Только с помощью addTags

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

Вы получаете следующее:

Далее с updateTag обратите внимание на изменение описания:

this.meta.addTags([ {name: 'description', content: 'Как использовать Angular 4 meta service'}, {name: 'author', content: 'talkdotnet'}, {name: 'keywords', content: 'Angular, Meta Service'} ]);

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

Ответ 4

Angular имеет функцию безопасности, которая будет показывать только содержимое страницы, представленную в файле index.html. Один из способов увидеть это - проверить свой код на одной странице. Вы сможете увидеть метатеги и значения. Другое решение - использовать Angular Universal, который полезен для целей SEO. Используя Angular universal, вы сможете увидеть содержимое страницы в источнике.