AngularstrictstrictPropertyInitialization-在哪里初始化成员?
在组件初始化期间,我想检索一些用户信息。现在,使用 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();
}
}
我应该在我的代码中使用哪些可能性?
回答
TL;DR 使用选项 #1。
哪一个是正确的?
您是否userInfo$仅在 HTML 模板中使用?那么这三个选项理论上都应该有效。
为什么?
因为模板代码在 之后运行ngOnInit,所以userInfo$在所有三个选项中都应该被 then 初始化。
哪一个更好?
#1 和 #2 本质上是一样的,在这两种情况下,userInfo$都是在构造函数中初始化。我更喜欢#1,因为它消除了代码中的冗余。
#3 略有不同,因为初始化没有在构造函数中发生。因此,如果您userInfo$在组件内部使用,这可能会引入一些微妙的错误(例如,在ngOnChangeswhich 之前被调用ngOnInit)。
THE END
二维码