Angular SEO 服务更新标签类型不可分配

Question

我正在尝试创建一个基于 Angular 元服务的 seo 服务（https://angular.io/api/platform-browser/Meta）

服务中的方法之一是社交媒体标签管理器。 由于某种原因，它一直失败并显示此消息：

类型参数 '{ name: string;内容：字符串；财产？： 不明确的; } | { 属性：字符串；内容：字符串；名称？：未定义； }' 不可分配给“MetaDefinition”类型的参数。类型 '{ 名称：字符串；内容：字符串；属性？：未定义； }' 不是 可分配给类型“MetaDefinition”。 输入 '{ 名称：字符串；内容：字符串；属性？：未定义； }' 不可分配给类型 '{ [prop: string]: string; }'。 属性“property”与索引签名不兼容。 类型“未定义”不可分配给类型“字符串”

这是方法语法：

  socialTags(action:string,pageTagContent:PageTagContent) {

      
      const socialTags =[
        {name:"twitter:title", content: pageTagContent.pageTitle},
        {name:"twitter:description", content: pageTagContent.description},
        {name:"twitter:image", content: pageTagContent.image},
        {name:"twitter:card", content: pageTagContent.imageLarge},
        {property:'og:title', content: pageTagContent.pageTitle},
        {property:'og:image', content: pageTagContent.image}
      ]

      if(action === 'update'){
        socialTags.forEach( obj => this.meta.updateTag( obj ) ) //obj throws the error
      }else{
       //something else
      }

    }

我的服务基于本教程： https://www.tektutorialshub.com/angular/meta-service-in-angular-add-update-meta-tags-example/

实际上不确定为什么。

Answer 1

好吧，过了一会儿我想出了一个主意， 显然这是一个类型问题。但是哪里！？ 没有一个教程甚至提到类型是 updateTag 方法的上下文，所以我不得不去挖掘源代码......

socialTags(action:string,pageTagContent:PageTagContent) {

  //there is more to this subject, also apple meta tags... more og (facebook) tags...
  const socialTags:**MetaDefinition[]** =[
    {name:"twitter:title", content: pageTagContent.pageTitle},
    {name:"twitter:description", content: pageTagContent.description},
    {name:"twitter:image", content: pageTagContent.image},
    {name:"twitter:card", content: pageTagContent.imageLarge},
    {property:'og:title', content: pageTagContent.pageTitle},
    {property:'og:image', content: pageTagContent.image}
    // { property:"og:type", content:"video.movie" },
    // { property:"og:url", content:"https://www.imdb.com/title/tt0117500/" }, ...
  ]

  if(action === 'update'){
    socialTags.forEach( obj => this.meta.updateTag( obj ) )
  }else{
    this.meta.addTags(socialTags)
  }

}

Answer 2

问题似乎出在 TypeScript 对 Angular Meta 服务的 updateTag 方法的类型推断上。该方法需要一个 MetaDefinition 类型的参数，它本质上是一个具有键值对的对象，其中键和值都是字符串。

在您的情况下，socialTags 数组具有联合类型 { name: string; 的项目。内容：字符串；属性？：未定义； } | { 属性：字符串；内容：字符串；名称？：未定义； }。 TypeScript 无法确定数组中的每个对象是否满足 MetaDefinition 类型。

要解决此问题，您可以显式键入 SocialTags 数组并确保每个对象都符合 MetaDefinition 类型。具体方法如下：

const socialTags: MetaDefinition[] = [
  

const socialTags: MetaDefinition[] = [
  { name: "twitter:title", content: pageTagContent.pageTitle },
  { name: "twitter:description", content: pageTagContent.description },
  { name: "twitter:image", content: pageTagContent.image },
  { name: "twitter:card", content: pageTagContent.imageLarge },
  { property: 'og:title', content: pageTagContent.pageTitle },
  { property: 'og:image', content: pageTagContent.image }
];

if (action === 'update') {
  socialTags.forEach(obj => this.meta.updateTag(obj));
} else {
  // something else
}