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

Question

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

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

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

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

我该怎么做？

编辑

我使用的是 Angular 4.x.x，现在称为普通 Angular。我像这样注入(inject) 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

编辑:正如评论中所指出的，此解决方案是一个 hacky 解决方案，应谨慎使用。

您可以注入(inject)一些其他类型和函数“ɵ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');
    // ..

  }
}

我已经对此进行了测试并将其用于生产。