Angular中构造函数和ngOnInit（）之间的逻辑混淆答案

【问题标题】：Confusion about Logic between constructor and ngOnInit() in AngularAngular中构造函数和ngOnInit（）之间的逻辑混淆
【发布时间】：2019-11-12 18:53:48
【问题描述】：

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public title = 'my-project';
  public isAuthenticated: boolean;

  constructor(public oktaAuth: OktaAuthService) {
    this.oktaAuth.$authenticationState.subscribe(
      (isAuthenticated: boolean) => this.isAuthenticated = isAuthenticated
    );
  }

  async ngOnInit() {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
  }

  login() {
    this.oktaAuth.loginRedirect();
  }

  logout() {
    this.oktaAuth.logout('/');
  }
}

我是 Angular 的新手，当我看到这段代码时，我真的很困惑。我读了一些文章，我知道构造函数是初始化一个类，ngOnInit 是在构造函数之后运行。但在代码中，

构造函数和ngOnInit之间的逻辑是什么？对于我的理解，在构造函数中，它监听赋值函数，并在构造之后，通过分配初始化类 oktaAuth.isAuthenticated()
何时更改 isAuthenticated 变量？
为什么我们需要异步 ngOnInit()？
如果我们想要同步方式，该怎么做？

【问题讨论】：

仅供参考，AngularJS 暗示您使用的是旧的 Angular（版本
@TomFaltesek 感谢您指出
并且使ngOnInit() async awai，组件渲染的加载正在停止。而且用户体验很差。 Constructor() 用于在类中定义服务 DI，类也没有完全加载到 Dom。当类完全加载到 Dom 时调用 ngOnInit()。这样我们就可以在这里分配默认属性值

标签： javascript angular okta

【解决方案1】：

Async/await 只是 thenables（或 Promises）的语法糖。

这使用 asyc/await：

async ngOnInit() {
  this.isAuthenticated = await this.oktaAuth.isAuthenticated();
}

这与上面没有 async/await 关键字的情况相同。

ngOnInit() {
  return this.oktaAuth.isAuthenticated().then(isAuth => this.isAuthenticated = isAuth);
}

上述两个示例都返回了一个承诺，正如@GaurangDhorda 和@AluanHaddad 指出的那样，在等待承诺解决时，可能会延迟组件的渲染。

您可以通过不从您的 ngOnInit 方法返回承诺来避免这种延迟，如下例所示：

ngOnInit() {
  this.oktaAuth.isAuthenticated().then(isAuth => this.isAuthenticated = isAuth);
}

至于您对构造函数与ngOnInit 的问题，我会查看所有Angular lifecycle event hooks 的文档。

ngOnInit

在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。

在第一个 ngOnChanges() 之后调用一次。

当oktaAuth.isAuthenticated() 承诺被解决（在ngOnInit 中）以及每当OktaAuthService 通过$authenticationState observable 省略一个新值时，你的isAuthenticated 变量将被改变（你已经订阅了构造函数）。

【讨论】：