Question

在我的Angular 2应用程序中，我想首先加载一些SVG，然后再启动应用程序。为此，我首先从服务器加载一个svg位置列表，然后依次获取每个位置。

我有一个＆＃39; loading＆＃39;我的AppComponent上的属性，它控制几个ngIfs来显示/隐藏一些加载文本。问题是，一旦加载了svgs，Angular就不会更新AppComponent中的绑定。

这是为什么？我以为区域负责这个？

SvgLoader

members

AppComponent

import {Injectable, Output, EventEmitter, NgZone} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';

const SVG_LIST:string = 'svg/list.json';

@Injectable()
export class SvgLoader {
    @Output() state: EventEmitter<string> = new EventEmitter();

    private svgs:{[file:string]:string};

    constructor(private http:Http){
        this.svgs = {};
    }

    getSvg(path:string):string {
        return this.svgs[path];
    }

    load():void {
        this.http.get(SVG_LIST)
            .map(res => {
                return <Array<string>> res.json().files;
            })
            .flatMap((files) => Observable.forkJoin(files.map(file => {
                return this.http.get('svg/' + file);
            })))
            .catch(this.handleError)
            .mergeAll()
            .subscribe(
                res => {
                    let index = res.url.indexOf('svg');
                    let path = res.url.substring(index);
                    this.svgs[path] = res.text();
                },
                error => console.error(error),
                () => {
                    this.state.emit('loaded');
                }
            );
    }

    private handleError(error:Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

模板

export class AppComponent {

    // On start, list the game sessions
    private state:string;
    public loading:boolean;

    constructor(private svgLoader:SvgLoader){
        this.loading = true;
        this.state = 'joining';
    }

    ngOnInit():void {
        this.svgLoader.state.subscribe(this.loaded);
        this.svgLoader.load();
    }

    loaded():void {
        console.log('loaded');
        this.loading = false;
    }
}

异步操作后Angular 2绑定未更新

0 个答案: