Question

上下文 我有一个Angular 2+应用程序，它调用一个Web API，其中包含由loadScript生命周期钩子中的AfterViewInit函数创建的脚本标记上的src属性的URL。

Web API返回一个JsonResult，并且正在产生我期望的数据。我能够在组件模板中插入一些数据。

此外，在我添加对Web API的调用之前，loadScript函数正在使用硬编码参数。

在github上阅读thread。 A＆＃34;会员＆＃34;声明脚本不应该按需加载。所以我用loadScript函数实现的本质上是一个解决方法，但是如何加载它们呢？我不想在index.html文件中放置看似无穷无尽的脚本标记。

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';

@Component({
    selector: 'app-agriculture-roadmap',
    templateUrl: './agriculture-roadmap.component.html',
    styleUrls: ['./agriculture-roadmap.component.css']
})

export class RoadmapComponent implements OnInit, AfterViewInit {

    constructor(private _httpService: Http, private _route: ActivatedRoute)
    {

    }

    apiRoadmaps: { roadmapName: string, pdfRoadmapURL: string, jsRoadmapURL: string };

    ngOnInit() {   
        this._httpService
            .get('/api/roadmaps/' + this._route.params)
            .subscribe(values => {
                this.apiRoadmaps = values.json() as { roadmapName: string, pdfRoadmapURL: string, jsRoadmapURL: string };
            });
    }

    async ngAfterViewInit() {
        await this.loadScript(this.apiRoadmaps.jsRoadmapURL);
    }

    private loadScript(scriptUrl: string) {
        return new Promise((resolve, reject) => {
            const scriptElement = document.createElement('script')
            scriptElement.src = scriptUrl
            scriptElement.onload = resolve
            document.body.appendChild(scriptElement)
        })
    }
}

Answer 1

如果您使用的是角度cli。然后将这些脚本放在

中

angular-cli.json file under scripts array

scripts:[
.....
]

请参阅[link]（https://rahulrsingh09.github.io/AngularConcepts/faq）

如果在有或没有打字的情况下在Angular中引用第三方js或脚本，它有一个问题。

当Src属性来自Web API调用时，在Angular 2 App中加载脚本标记

1 个答案: