如何使用 SSR 在 Angular 17 独立组件中添加丰富片段的结构化数据？

Question

我正在使用启用了 SSR 配置和完整独立组件架构的 Angular 17，并且希望在不同组件中插入结构化数据以实现丰富的代码片段和更好的 SEO 爬行。

示例：

我寻找了不同的方法来做到这一点，并遇到了一些这样做的想法，如下所示：

constructor(private meta:Meta){
meta.addTag({name:'application/ld+json' , content:JSON.stringify(STRUCTURED_DATA_OBJECT)});
}

但这不是我想要的，我想在

<script>

标签中为每个独立组件单独添加结构化数据对象。

Answer 1

我找到了一种使用 Renderer2 来做到这一点的方法

请参阅以下代码以供参考👇

在您想要添加结构化数据的任何组件中使用此代码。

import {Inject, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';


@Component({...})

export class CustomClass implements OnInit{

constructor(private _renderer:Renderer2 , @Inject(DOCUMENT) private _document:Document){}

public ngOnInit(){

  let script = this._renderer.createElement('script');
  script.type = 'application/ld+json';
  script.text = `{data}`;  /*Insert the data you want to add*/

  this._renderer.appendChild(this._document.body, script);
  }