Angular @input 值在构造函数中达到后期

Question

我正在编写一个具有 2 @Input() 的指令变量并从使用该指令(如组件)的人那里获取值(value)。

一切安好。唯一的问题是当有 Observable.subscribe在构造函数中，然后 @Input值在构造函数中可用，没有 Observable.subscribe @Input()变量值为undefined
我知道获得 @Input() 的更好方法指令的变量是在生命周期钩子(Hook)中访问它们，如 ngOnInit或 ngOnChange但我的问题是:为什么这在某些情况下可用，而在指令中的其他情况下不可用。

<div authorizedme
     [permission]="'manager'"
     [auth]="department"
     class="col-2 data-object-link">your salary is $90,000,0000

指示

如果在 subscribe 下面的指令的构造函数中代码在那里，然后权限和身份验证可用，如果它被注释掉，那么 @Input()变量是 undefined .

this.userService.getUser().subscribe((user) => {
  this.user = user;
  if (this.authorized()) {
    this.elementRef.nativeElement.style.display = 'block';
  }
});

下面是整个指令代码

@Directive({
  selector: '[authorizedme]'
})
export class AuthorizedDirective implements OnInit {

  @Input() permission: string;
  @Input() auth: string;
  private user: any;

  constructor(private elementRef: ElementRef, private currentUserService: userService) {
    this.elementRef.nativeElement.style.display = 'none';
    this.currentUser = this.userService.userAuthorizations;

    /*this.currentUserService.getUser().subscribe((user) => {
      this.user = user;
      if (this.authorized()) {
        this.elementRef.nativeElement.style.display = 'block';
      }
    });*/

  }

  public authorized() {
   return this.user || authorize;
  }
}

Answer 1

这是生命周期钩子(Hook)和异步处理的经典案例!

一步一步来:

Angular 实例化指令

Angular 加工东西

在处理过程中，它会调用 LifeCycle Hook ，让您知道发生了什么。

综上所述，这意味着 Angular 使用其构造函数实例化了您的指令 AuthorizedDirective。在该函数权限的上下文中，auth 和 currentUser 都是未定义的，因为您尚未为它们设置值。然后，您订阅将在服务中发生的更改，该更改基本上是在我们处理 observables 之后注册一个函数。

碰巧的是 observables，直到它们所在的 Angular 区域的一个勾号才会被处理。

在 ngOnInit 中设置权限/身份验证的原因是，在 Angular 实例化您的对象之后，它会解析它以查看您是否有任何输入或输出值要使用。如果这样做，它会查找在元素上设置的相应内容，并在调用 ngOnInit 之前设置它们，这都是在区域滴答发生之前。

所以这就是为什么你在 subscribe 和 ngOnInit 中有值，但在构造函数本身中没有值。