更新时间:2023-10-25 23:18:52
这里的派对可能有点晚了,但由于上述答案与Angular s-s-r不兼容(例如文档未定义
服务器端或 document.createElement不是函数
),我决定在服务器和浏览器上下文中编写适用于Angular 4+,的版本:
Maybe a little late to the party here, but since the above answers do not work well with Angular s-s-r (e.g. document is not defined
server-side or document.createElement is not a function
), I decided to write a version that works for Angular 4+, in both server and browser context:
组件实现
import { Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
class MyComponent implements OnInit {
constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document) {
}
public ngOnInit() {
let s = this._renderer2.createElement('script');
s.type = `application/ld+json`;
s.text = `
{
"@context": "https://schema.org"
/* your schema.org microdata goes here */
}
`;
this._renderer2.appendChild(this._document.body, s);
}
}
服务实施
注意:服务不能直接使用 Renderer2
。实际上,渲染元素应该由Component 完成。但是,您可能会发现自己处于要在页面上自动创建JSON-LD 脚本
标记的情况。情况可能是在路线导航变更事件上调用此类功能。因此我决定添加一个适用于服务
上下文的版本。
NOTE: Services cannot use Renderer2
directly. In fact, rendering element is supposed to be done by a Component. However, you might find yourself in situation where you want to automate the creation of JSON-LD script
tags on a page. A situation could be to invoke such function on route navigation change events. Hence I decided to add a version that works in a Service
context.
import { Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
class MyService {
constructor(@Inject(DOCUMENT) private _document) {
}
/**
* Set JSON-LD Microdata on the Document Body.
*
* @param renderer2 The Angular Renderer
* @param data The data for the JSON-LD script
* @returns void
*/
public setJsonLd(renderer2: Renderer2, data: any): void {
let s = renderer2.createElement('script');
s.type = `application/ld+json`;
s.text = `${JSON.stringify(data)}`;
renderer2.appendChild(this._document.body, s);
}
}