5

我有一个 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
  }
}
4

1 回答 1

1

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

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

  }
}

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

于 2017-05-03T21:06:02.423 回答