Angular 2 / 4 / Universal - 如何使用 JSON-LD 数据？

Question

我有一个 Angular 4 Universal 应用程序，我想开始使用 JSON-LD 格式的微数据。

它使用带有一些内容的script标签，例如：

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  ...
}
</script>

由于此数据应按视图更改，因此我正在寻找一种方法将这些数据注入到 Angular 4 中的路由更改中。目前，script tags are stripped from templates。当使用docuemnt.createElement 的解决方法时，这在服务器端 Angular Universal 应用程序上不起作用。

我该怎么做？

编辑

我使用 Angular 4.x.x，现在称为普通 Angular。 我像这样注入document：

import { DOCUMENT } from '@angular/platform-browser';

class Test {
  constructor(@Inject(DOCUMENT) private _document) {
  }

  public createScriptTag() {
    this._document.createElement('script'); // doesn't work server-side
  }
}

Answer 1

编辑：正如 cmets 中所指出的，此解决方案是一个 hacky 解决方案，请谨慎使用。

你可以注入一些其他类型和函数“ɵgetDOM”和“ɵDomAdapter”来获取对dom的引用。很抱歉称它为“某些”服务和功能，因为我不知道他们为什么这样命名它。我刚刚查看了into source code 以及 Angular 团队如何使用 MetaService 进行操作。

import { Inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { ɵgetDOM, ɵDomAdapter, DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class SeoService {

  private dom: ɵDomAdapter;

  constructor(@Inject(DOCUMENT) private document: any,
              private titleService: Title,
              private metaService: Meta) {

    this.dom = ɵgetDOM();

    let scriptEl = this.dom.createElement('script');
    // ..

  }
}

我已经对此进行了测试并在生产中使用它。