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中将路径更改注入此数据。目前， 脚本标记从模板中删除 。 使用docuemnt.createElement的变通方法时，这不适用于服务器端的Angular Universal应用程序。

我该怎么做？

编辑

我使用Angular 4.xx，现在称为普通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

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

您可以注入一些其他类型和函数“ɵgetDOM”和“ɵDomAdapter”来获取对dom的引用。 很抱歉称它为“某些”服务和功能，因为我不知道为什么他们这样命名。 我只是研究了源代码以及角度团队如何使用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');
    // ..

  }
}

我已经测试了这个并在生产中使用它。