Question

我有一个在ngAfterViewChecked期间加载地图的组件。

我想在地图在#map div元素中完全加载后运行一个服务。

地图正确/完全加载后，#map现在有canvas个孩子。

现在的问题是，一旦canvas中的#map元素出现，我就不知道启动服务的正确方式是什么。

map.component.ts

第一版：

ngAfterViewChecked() {
    this.map.load();
    console.log(window['something']); // DOESNT WORK
    // this.service.run();
}

第二版：

ngAfterViewChecked() {
    this.map.load().then(res => {
        console.log(window['something']); // DOESNT WORK
        // this.service.run();
    });
}

map.service.ts

public load() {
    return new Promise(resolve => {
            let node = document.createElement('script');
            node.src = '/Scripts/map-loader.js';
            node.type = 'text/javascript';
            node.async = true;
            node.charset = 'utf-8';
            document.getElementsByTagName('head')[0].appendChild(node);
    });
}

由于地图加载器是外部Javascript，因此非常困难。

真的希望有人能说清楚。

已编辑[更新代码]

map.component.ts

import { Component, AfterViewChecked } from '@angular/core';
import { ConfigService } from '../../service/service.config';
import { RequestService } from '../../service/service.request';
import { MapRenderService } from '../../service/map-render.service';

@Component({
    templateUrl: './app/component/map/map.component.html'
})

export class MapComponent implements AfterViewChecked {
    constructor(private send: RequestService, private config: ConfigService, private mapRender: MapRenderService) {
    }

    ngAfterViewChecked() {
        this.mapRender.load().then(res => {
            console.log(window['micello']); // ALWAYS PRINTS HERE
        });
    }
}

地图render.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class MapRenderService {

    private loader = '/Scripts/map-loader.js';

    public load() {
        return new Promise(resolve => {
            let node = document.createElement('script');
            node.src = '/Scripts/map-loader.js';
            node.type = 'text/javascript';
            node.async = true;
            node.charset = 'utf-8';
            document.getElementsByTagName('head')[0].appendChild(node);
            resolve();
        });
    }
}

控制台输出

Answer 1

您错过了resolve来电承诺。将服务更改为此。

public load() {
    return new Promise(resolve => {
            let node = document.createElement('script');
            node.src = '/Scripts/map-loader.js';
            node.type = 'text/javascript';
            node.async = true;
            node.charset = 'utf-8';
            document.getElementsByTagName('head')[0].appendChild(node);
           resolve();
    });
}

使用then

运行第二个版本

如果div元素存在，如何运行服务

1 个答案: