Question

我可以在index.html中使用Meta概念在角度4中动态设置标签。但是当我尝试删除标签时删除，我怎样才能删除之前添加的标签？

这是我尝试过的：设置标签：

import {Meta ,MetaDefinition } from '@angular/platform-browser';
@Component({
  selector: 'app-share-video',
  templateUrl: './share-video.component.html',
  })
export class ShareVideoComponent implements OnInit {
constructor(public metaServic:Meta){}
ngOnInit(){
    const ogtitle: MetaDefinition   =  { name: 'og:title', content: 'Grace' };
    const ogSitename: MetaDefinition = { name: 'og:site_name', content: 'My Favourite Albums'};
    const ogUrl: MetaDefinition = { name: 'og:url', content: 'https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html'};
    const ogdesc: MetaDefinition = { name: 'og:description', content: 'angular 4 share video description'};
    this.metaService.addTag(ogtitle);
    this.metaService.addTag(ogSitename);
    this.metaService.addTag(ogUrl);
    this.metaService.addTag(ogdesc);
  }        
ngOnDestroy() {
   this.metaService.removeTag("property='og:title'");
   this.metaService.removeTag("property='og:site_name'");
   this.metaService.removeTag("property='og:url'");
   this.metaService.removeTag("property='og:description'");
    }
}

在destroy方法中我删除了标签，但这些标签没有删除，我该如何删除标签？紧随其后：meta tags blog

Answer 1

您尝试使用的属性选择器为name，而不是property。

你必须使用

this.metaService.removeTag("name='og:title'");
this.metaService.removeTag("name='og:site_name'");
this.metaService.removeTag("name='og:url'");
this.metaService.removeTag("name='og:description'");

而不是

this.metaService.removeTag("property='og:title'");
this.metaService.removeTag("property='og:site_name'");
this.metaService.removeTag("property='og:url'");
this.metaService.removeTag("property='og:description'");

plnkr

Answer 2

Angular 6+，您需要用于this.metaService.removeTag("property='og:description'")等...因为this.metaService.removeTag("name='og:title'");不能正常工作。

Answer 3

所有OpenGraph tags都应使用“属性”而不是“名称”来添加和删除标签。您正在使用“名称”进行添加，并尝试通过“属性”进行删除。

固定代码：

  ngOnInit() {
    const ogtitle: MetaDefinition =  { property: 'og:title', content: 'Grace' };
    const ogSitename: MetaDefinition = { property: 'og:site_name', content: 'My Favourite Albums'};
    const ogUrl: MetaDefinition = { property: 'og:url', content: 'https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html'};
    const ogdesc: MetaDefinition = { property: 'og:description', content: 'angular 4 share video description'};
    this.metaService.addTag(ogtitle);
    this.metaService.addTag(ogSitename);
    this.metaService.addTag(ogUrl);
    this.metaService.addTag(ogdesc);
  }

  ngOnDestroy() {
   this.metaService.removeTag("property='og:title'");
   this.metaService.removeTag("property='og:site_name'");
   this.metaService.removeTag("property='og:url'");
   this.metaService.removeTag("property='og:description'");
  }

对于其他页面元数据（例如Twitter Cards或普通元数据（例如description，author，keywords等），请使用“名称”。

"name='description'"
"name='author'"
"name='twitter:description'"
"name='twitter:image'"
"name='twitter:image:alt'"
"name='keywords'"

如何使用角4中的Meta删除标记

3 个答案: