2017-12-18 156 views
0

外部脚本,我需要到下一个脚本加载到我的角度应用angular5负载使用参数

<script src="https://maps.googleapis.com/maps/api/js?key={{google_key}}&libraries=places&language=DE_de"></script> 

正如我知道我可以把全球JS来.angular-cli.json(不适用于外部脚本工作)或index.html,但我如何添加参数(google_key)?

+0

是你的谷歌关键改变你的应用程序的整个生命周期?我认为params对于动态内容很有用,在用户呈现前端之前可能会经常改变或者未知。在google api key的情况下,我建议在构建过程中替换运行时可能会更好(例如,将它放在index.html中,并在构建应用程序之前通过脚本) –

+0

@BenediktSchmidt它不是动态的 - 正确。你是否建议类似gulp/grunt解决方案? –

+1

你是通过angular-cli建设吗?我目前正在做类似的事情,我只是在angular-cli构建更新我的'index.html'后运行一个脚本。我将这个调用结合在一个npm作业中,它可能看起来像这样'ng build && node _yourHtmlUpdateFile_' –

回答

1

用于index.html中动态脚本的更快速的解决方案是通过ID引用它和设定从app.component.ts src属性:

googleApi = `https://maps.googleapis.com/maps/api/js?key= 
${environment.google_key}&libraries=places&language=DE_de` 

constructor(@Inject(DOCUMENT) private document: any) {} 

ngOnInit() { 
    this.document.getElementById('theId').setAttribute('src', this.googleApi) 
} 

但是,正如在评论建议的,在这种情况下将它作为构建过程的一部分可能是更好的解决方案。

+0

谢谢,它会工作,但我认为应该有一些解决方案从箱子没有黑客 –