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

2019-09-18 05:35:06 阅读：213 来源： 互联网

标签：json-ld javascript angular angular2-universal

Angular2删除< script>自动从模板中标记以阻止人们使用此功能作为“poor’s man” loader.

这里的问题是脚本标签目前比仅加载代码或其他脚本文件有更多的用途.围绕< script>的进一步功能有可能.标签也将在未来推出.

目前使用的是JSON-LD,它采用的格式

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

通常建议的解决方法是通过ngAfterViewInit挂钩到文档的dynamically add script tags,但这显然不是正确的ng2练习,并且不能在服务器端工作,JSON-LD显然需要能够做到.

是否有任何其他解决方法可用于包含< script> angular2模板中的标签(即使标签在浏览器中是惰性的),还是这个框架过于自以为是？如果在angular2中无法解决这种情况,可能还有哪些其他解决方案？

解决方法:

也许这里的派对有点晚了,但由于上述答案与Angular SSR不兼容(例如文档未定义服务器端或document.createElement不是函数),我决定编写一个适用于Angular的版本4,在服务器和浏览器上下文中：

组件实现

import { Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

class MyComponent implements OnInit {

    constructor(
        private _renderer2: Renderer2, 
        @Inject(DOCUMENT) private _document: 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脚本标记的情况.作为示例,情况可以是在路线导航改变事件上调用这样的功能.因此,我决定添加一个在Service上下文中工作的版本.

import { Renderer2, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

/**
 * Use a Service to automate creation of JSON-LD Microdata.
 */
class MyService {

    constructor(
        @Inject(DOCUMENT) private _document: 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);
    }
}

标签：json-ld,javascript,angular,angular2-universal
来源： https://codeday.me/bug/20190918/1810664.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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