如何使用构造函数上的异步调用注入服务，Angular 2

Posted 2023-03-07

【中文标题】如何使用构造函数上的异步调用注入服务，Angular 2

【英文标题】：How to Inject services with Async call on constructor, Angular 2

【发布时间】：2016-04-04 15:11:22

【问题描述】：

这是问题所在：我有一个在构造函数中发出 HTTP 请求的服务：

    constructor(public http: Http, public geolocation: Geolocation) 
        this.http = http;
        this.geolocation = geolocation;
        //Http request... this will set variable forecast of the class when complete.
        this.getForecast(16);
    

然后我将该服务注入这样的组件中：

    constructor(public connector: ApiConnector) 
         this.forecast = connector.forecast;
    

如果我像这里一样尝试在组件装饰器上使用组件类的预测成员：

@Component(
    selector: 'app',
    directives: [MainForecast, DailyForecast],
    template: `
        <main-forecast [main-weather]="forecast"></main-forecast>
        <daily-forecast [weather-list]="forecast.list"></daily-forecast>
    `,
)

我收到错误消息“无法读取...中未定义的属性‘列表’”

是否有可能在组件构造函数中使用 Promise？

【问题讨论】：

如果forecast 是一个承诺，你应该这样做[weather-list]="(forecast | async)?.list"

它本身不是一个承诺/可观察的。但是，如果我可以将预测更改为承诺，我将研究并查看不错的方法。

如果它不是一个承诺或可观察的，那很好（我认为这是因为你的问题的一部分）。您可以删除| async 并留下forecast?.list。见elvis operator

【参考方案1】：

Angular2 建议在 ngOnInit 而不是在构造函数中做繁重的工作。

ngOnInit 是一个生命周期钩子/事件。

【讨论】：

ngOnInit 适用于组件，不适用于服务（可注入）

你可以调用异步函数，只是不能在构造函数中等待异步函数，然后你可以使用'then'来做你的投标

【参考方案2】：

您正在尝试解决角度生命周期。

您似乎假设您的服务是在启动期间启动的。不是这种情况。即使您的服务是在根级别提供的，它也可能只能及时初始化。您可能希望在启动逻辑期间调用一些公共 init 方法以确保其初始化。