Angular strict strictPropertyInitialization - 在哪里初始化成员？

Question

在组件初始化期间，我想检索一些用户信息。现在，使用 Angular 严格模式，我不确定在哪里加载这些数据？

我能想到 3 个选项。但哪个是正确的呢？或者还有其他可能吗？

#1 在此选项中，将在 userInfo 初始化时直接调用服务方法。

export class NavComponent implements OnInit {
  public userInfo$: Observable<LoggedInUser> = this.sessionService.getUserInformation();

  constructor(private sessionService: SessionService) {}

  ngOnInit(): void {}
}

#2 在我看来，最好将其源代码到构造函数中，如下所示：

export class NavComponent implements OnInit {
  public isMobileMenuCollapsed = true;
  public userInfo$: Observable<LoggedInUser>;

  constructor(private sessionService: SessionService) {
    this.userInfo$ = this.sessionService.getUserInformation();
  }

  ngOnInit(): void {}
}

#3 在 ngOnInit 方法中而不是构造函数。但是对于这个解决方案，我还需要明确分配断言：

export class NavComponent implements OnInit {
  public isMobileMenuCollapsed = true;
  public userInfo$!: Observable<LoggedInUser>;

  constructor(private sessionService: SessionService) {
  }

ngOnInit(): void {
  this.userInfo$ = this.sessionService.getUserInformation();
}

}

我应该在我的代码中使用哪些可能性？

Answer 1

TL;DR 使用选项 #1。

哪一个是正确的？

您是否userInfo$仅在 HTML 模板中使用？那么这三个选项理论上都应该有效。

为什么？

因为模板代码在 之后运行ngOnInit，所以userInfo$在所有三个选项中都应该被 then 初始化。

哪一个更好？

#1 和 #2 本质上是一样的，在这两种情况下，userInfo$都是在构造函数中初始化。我更喜欢#1，因为它消除了代码中的冗余。

#3 略有不同，因为初始化没有在构造函数中发生。因此，如果您userInfo$在组件内部使用，这可能会引入一些微妙的错误（例如，在ngOnChangeswhich 之前被调用ngOnInit）。

Answer 2

你真正的问题是什么？我猜这是关于使用异步管道时模板中类型不匹配的问题？

您需要知道异步管道可能返回的null不匹配不是您可观察到的，而是与管道结果的不匹配。

如何修复它？

好吧，在元素或更高级别的元素上引入 *ngIf 并使用结果。由于 *ngIf 数据类型不能null再包含

<ng-container *ngIf="data$ | async as data">