Angular 依赖注入构造的顺序答案

【问题标题】：Order of Angular dependency injection constructionAngular 依赖注入构造的顺序
【发布时间】：2020-07-27 03:10:14
【问题描述】：

在我的 Angular 应用程序中，我有一个服务 user-serial-service，它通过一个 API 调用将用户序列号作为字符串检索，然后将此值存储在 BehaviourSubject 中

我想在我的 app.component 的构造函数中使用此序列号，但我发现在 app.component 的构造函数触发之前，用于检索序列号的 API 调用未完成，因此未定义 userSerial$ .

我认为这是因为 app.component 是 Angular 生成的第一个组件，因此是第一个要构建的组件，这意味着在创建 app.component 之前服务的 API 调用不会完成.

这让我想知道 Angular 究竟是如何实例化它的依赖项以及以什么顺序实例化的。如果我想强制首先构建服务以允许其 API 调用在 app.component 实例化之前完成，这可能吗？是先构造 App.Component，然后再构造其列出的所有依赖项吗？

export class AppComponent {

    constructor(private _userSerialService: UserSerialService) {
        console.log("User serial: ", this._userSerialService.userSerial$.getValue()); //userSerial$ is undefined
    }
}

export class UserSerialService {

    public userSerial$: BehaviorSubject<string>;

    constructor(private _http: HttpClient) {
      this.getUserSerial().pipe(take(1)).subscribe(res => {
        this.userSerial$ = new BehaviorSubject<string>(res.body.serial)
      })
    }

  }

【问题讨论】：

标签： angular dependency-injection

【解决方案1】：

在您的情况下，您应该使用APP_INITIALIZER 在应用程序的引导程序处执行 API 调用（我无法就如何实现它给您一个冗长的答案，但您可能会找到很多谷歌上的教程）。

所以当 AppComponent 被初始化时，userSerial 就可用了。但请注意查询 API 所需的时间，因为它可能会减慢应用程序的初始化速度。

对于类来说，更常见的是，你不能真正对生命周期钩子的构造函数中的异步代码进行操作来延迟组件的创建。异步代码在类实例化时执行，但不会阻塞等待完成的创建。

所以在你的情况下：
* AppComponent 创建开始
* 服务创建以异步执行开始
* AppComponent 创建结束
* 稍后异步代码就完成了

【讨论】：

APP_INITIALIZER 是一个有趣的概念。您的其余评论完全有道理，谢谢。