在组件初始化之前加载数据 - angular 2

Question

我的 App.component 在我的 user service 中调用了一个初始化方法。

ngOnInit(){
    this.init(true).then(data => {
        console.log("OnInit Called")
    })     
}

User.service returns a promise 依次调用 account.init

init = (isRegistered) => {
    return new Promise((resolve, reject) => {    
        this.account.init(isRegistered).then(data => {
            //some data inialization
            console.log("OnInit Called User Service")            
        });          
    });   
}

Account.service returns 使用 Observable.forkJoin

调用多个服务的承诺

init = ((userType: boolean) => {
    return new Promise((resolve, reject) => {
         Observable.forkJoin([
             this.m1,
             this.m2]).subscribe(data => {
                 //persist those return data   
             });           
    });
}

为什么两个 console.log 语句都没有被执行？
为什么它不在 Observable.forkJoin 完成其服务调用之前阻止组件初始化？

Answer 1

（和 2.）调用 resolve(...) 缺失

init = (isRegistered) => {
    return new Promise((resolve, reject) => {    
        this.account.init(isRegistered).then(data => {
            //some data inialization
            console.log("OnInit Called User Service")            
            resolve(/*someValue */); // <<<== missing
            // or reject(/* someValue */);
        });          
    });   
}

为什么你期望它阻止任何东西？ ngOnInit() 无法阻止。例如，您可以使用 *ngIf 在数据尚不可用之前不显示任何内容。您还可以使用路由器防护来防止在数据可用之前创建组件。 https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard 但是在JS中没有办法以任何方式阻止执行。

Answer 2

你一定要先解决Promise。

init = (isRegistered) => {
    return new Promise((resolve, reject) => {    
        this.account.init(isRegistered).then(data => {
            // some data initialization
            if (data) {
                resolve(...);
            } else {
                reject(...);
            }
            console.log("OnInit Called User Service")            
        });          
    });   
}

很难说出问题是什么，因为我们不知道 this.m1 和 this.m2 是什么。

使用 forkJoin() 时不要感到惊讶。如果其源 Observables 之一失败或未发出任何值并过早完成，此运算符 forkJoin() 不会发出任何值。

在组件初始化之前加载数据 - angular 2

Load data before component inialization - angular 2

javascript

rxjs

typescript

rxjs5

angular