Javascript 添加/更新不在angular5中工作的元标记

我使用下面的代码在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' 
 });
  }

appmodule中导入的元服务

但它不工作（不在我的网页来源）。有人能帮我吗

---

感谢

Angular有一个安全功能，它将只显示index.html文件中提供的页面内容。查看此内容的一种方法是在同一页上检查代码。您将能够看到元标记及其值。

---

另一个解决方案是使用搜索引擎优化的目的是有用的。通过使用Angular universal，您可以在view source中查看页面内容。

您只需更改：

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

（而不是通过inspect元素查看页面源代码）原因解释如下

你的方法也工作100%良好，你可以检查在我的演示

---

Angular不是从服务器端提供的，这就是为什么您可以看到任何 通过页面视图源的元标记，页面加载后正在更改的任何内容都不会显示在页面视图源中

如果要检查更新的元标记，需要检查元素 在那里检查一下

如果要在服务器端渲染，则可以选择

---

请尝试使用此模板

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

---

有关更多更新，请参阅

只需使用

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元服务'}， {name:'author'，content:'talkingdotnet'}， {name:'keywords'，content:'Angular，Meta Service'} ]);

this.meta.updateTag（{name:'description'，content:'Angular 4 meta service'}）

---

出现任何错误？请尝试在根组件中添加此代码。ts文件无错误。但元组件中的任何更新都无法回答此问题。。。实际上是在为一些完全不同的东西做广告…@kamalav，请检查更新的答案，希望这能消除您的疑虑：）谢谢，我可以在检查元素时看到meta。为什么我在查看页面时看不到Source？请解释为什么我在查看页面时看不到source@kamalav，请阅读注释，同样是一个角度通用，你会得到这样的想法：角度通用不解释任何关于元标记的东西。meta标记出现在inspect元素中，但不在view页面source中。它可以工作，请参见inspector内的head标记，您将在最底部看到这些meta标记