且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在Angular组件模板中添加脚本标记

更新时间: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);
    }
}