本文介绍了使用 Angular Universal 延迟加载外部 JS 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
https://maps.googleapis.com/maps/api/js?libraries=places&key=XXX
这是在 index.html 文件中，但我想延迟加载此脚本，因为该模块是延迟加载的，并不是所有用户都需要它.我不能使用直接访问 DOM 和附加脚本 el 的技巧.因为我想使用 Angular Universal ( SSR ).
This is inside index.html file, but i want to lazy load this script, because that module is lazy loaded and it's really not necessary for all users.I can't use trick with directly accessing the DOM and appending script el. because I want to use Angular Universal ( SSR ).
推荐答案
即使您使用的是 SSR，您也可以访问 DOM.将此添加到您的延迟加载模块模块或延迟加载模块的组件之一
You can access the DOM even if you are using SSR. Add this to your lazy loaded module module or one of the components of your lazy loaded module
import {DOCUMENT} from "@angular/common";
import {Renderer2} from '@angular/core';
constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2)
{
}
constructor()
{
const scriptElt = this.renderer.createElement('script');
this.renderer.setAttribute(scriptElt, 'type', 'text/javascript');
this.renderer.setAttribute(scriptElt, 'src', 'yourJSFile.js');
this.renderer.appendChild(this.document.head, scriptElt);
}
这篇关于使用 Angular Universal 延迟加载外部 JS 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！