2016-11-10 87 views
0

我有以下幾種類型: DataService - 使用signalr集線器從服務器獲取數據。 AppComponent - 這是我主應用程序的入口點如何在我的信號服務初始化之前推遲加載組件?

數據服務構造函數如下。

constructor(private http: Http) { 
    var hub = $.connection.spwHub; 
    hub.client.loadEmployees = this.loadEmployees; 
    $.connection.hub.start().done(() => { 
     ... 
    }); 
} 

我AppComponent如下:

constructor(service: DataService) {  
    this.company = service.getCompany(); 
    service.getEmployees().then(employees => this.employees = employees); 
    this.departments = service.getDepartments(); 
} 

我得到的當然是下面的錯誤,因爲由集線器連接之前樞紐異步調用至今未歸。

EXCEPTION:./AppComponent類中的錯誤AppComponent_Host - 內聯模板:0:0由:SignalR:Connection尚未完全初始化。使用.start()。done()或.start()。fail()在連接啓動後運行邏輯。

在AngularJs2中處理這個問題的最佳方法是什麼?

回答

0

您可以使用APP_INITIALIZER掛鉤在應用程序的其餘部分運行之前執行邏輯,獲取準備好的東西,無論如何。

在你app.module.ts(或任何你的主要模塊):

import { APP_INITIALIZER, NgModule }  from "@angular/core"; 
export function init_app(employeeService: EmployeeService) { 
    return() => employeeService.getEmployees(); 
} 

@NgModule({ 
    <...> 
    providers: [EmployeeService, { 
     provide: APP_INITIALIZER, 
     useFactory: init_app, 
     deps: [ EmployeeService ], 
     multi: true 
    }] 
}) 
export class AppModule { } 

服務返回一個承諾,其將被自動處理:

getEmployees() { 
    return <...function stuff ...> 
      .toPromise(); 
} 

而這裏的github問題,這是記錄在案(沒有關於angular.io站點的文檔):https://github.com/angular/angular/issues/9047

+0

我還不確定。我的意思是我想要一個隨機函數來處理信號。我可以只是$ .connection.hub.start()。done(()=> {...});但是,這打破了目的。我不想從AppComponent外部加載數據。我不僅需要最初運行一些代碼,還必須在加載應用程序組件之前返回代碼。 – jwize

0

搜索我沒有找到任何東西,我給出了這樣的想法,即不需要加載的組件應該可以默認推遲。這意味着答案是毫不費力的。

// start.component.ts 
constructor() { 
    // Start the connection 
    var hub = $.connection.spwHub; 
    $.connection.hub.start().done(() => { 
     // This loads the next component and runs the constructor 
     this.initialized = true; 
    }); 
} 

// start.component.html 
<div *ngIf="initialized"> 
    <main-component></main-component> 
<div> 

// This type is lazy loaded as soon as the initialized equals true. 
// main.component.ts 
constructor(employeeService: EmployeeService) { 
    // Finally, load the needed data. 
    this.employees = employeeService.getEmployees(); 
} 
相關問題