Question

我有以下类型： DataService - 使用signalr hub从服务器获取数据。 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中处理此问题的最佳方法是什么？

Answer 1

您可以使用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 { }

该服务正在返回一个将自动处理的Promise：

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

这是github问题，其中记录了这一点（还没有关于angular.io网站的文档）：https://github.com/angular/angular/issues/9047

Answer 2

在搜索并找不到任何内容之后，我认为不需要加载的组件应该默认延迟。这意味着答案是明智的。

// 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();
}

在初始化信号服务器之前，如何推迟加载组件？

2 个答案: