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>在角度2模板中的标签(即使标签在浏览器中是惰性的)还是框架太过分了？如果这种情况在角度2中无法解决,还有哪些其他解决方案可能存在？
解决方法
也许在这里的晚会有点晚了,但是由于上述答案对于Angular SSR(例如,文档没有定义,服务器端或document.createElement不是函数),我决定写一个适用于Angular的版本4,在服务器和浏览器上下文中：
组件实现
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脚本标签.情况可能是在路线导航更改事件上调用此功能.因此,我决定添加一个在服务环境中工作的版本.
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);
}
}