生命周期钩子中的异步事件

Question

关于生命周期钩子中的异步事件(例如可观察的事件)，我有一个问题。

如果我必须在ngOnInit中从后端获取数据，然后在类中分配属性，如：

   data: string;

   ngOnInit() {
     this.httpService.get(...).subscribe(data => this.data = data);
   }
   
   ngAfgerViewInit() {}

在这里，因为可观察的做回调函数，它将被视为事件，并将进入事件堆栈队列。所以我的问题是什么时候执行ngAfterViewInit()钩子？

1. 在完成数据分配之后，然后转到下一个生命周期挂钩。
2. 继续完成所有的生命周期挂钩，然后执行数据分配。

。

哪一个是对的？

我做了几次实验。请参阅下面的详细资料。顺便说一下，我使用ngrx商店的选择在这里创建可观察的。

1.我用控制台查看执行顺序。

我的代码是：

​

​

控制台是：

​

​

回调函数以同步方式执行，但在ngAfterViewInit之后不执行。

2.我添加了另一个ngrx运算符"of“，以在ngOnInit中创建另一个可观察到的运算符。

守则是：

​

​

控制台是：

​

​

与#1相同，回调函数在ngAfterViewInit之前执行，就像同步一样。

3.我添加了另一个ngrx操作符"timer“，以在ngOnInit中创建另一个可观察到的操作符。

守则是：

​

​

控制台是：

​

​

这一次，回调函数在ngAfterViewInit之后执行，并被视为异步函数。

所以这让我很困惑。有些可观察到的被视为异步的，而有些则被视为同步的。有人知道为什么吗？

Answer 1

根据角度源代码，钩子的选择是一个同步的过程。这意味着所有的钩子都被放置到调用堆栈中，并一个接一个地执行。

订阅的创建将在调用堆栈以及this.httpService.get(...).subscribe(...);中调用。

HTTP请求的异步性质

HttpClient在代码xhr.addEventListener('load', onLoad);下面使用XMLHttpRequest。onLoad -是放置在回调队列中的内部回调，并在请求完成并回调堆栈变为空后执行。此回调使用HTTP请求完成一个可观察到的回调，并导致执行来自.subscribe(...)的回调。

因此，回调.subscribe(data => this.data = data)只有在http请求的角句柄异步响应之后才被放入回调堆栈中--在所有钩子之后。

(对具有同步数据的流(例如of(true).subscribe(...)__)同步执行回调)

关于您的问题，执行命令是ngOnInit -> ngAfterViewInit -> callback function**.**

但是，如果可观测到的数据具有同步数据，例如of(true).subscribe(some_callback) -它将被执行的订单ngOnInit -> callback -> ngAfterViewInit -一切同步。

示例https://stackblitz.com/edit/angular-vdwnle

希望能帮上忙。

Answer 2

使用ChangeDetectorRef调用下一个lyfecilly钩子：

  constructor(
    private _cdr: ChangeDetectorRef,
    private httpService: YourHttpService,
  ) {}

  ngOnInit(): void {
    this.httpService.get(...).subscribe(data => {
      this.data = data;
      this._cdr.detectChanges();
    });
  }

Answer 3

所有事件都是异步的。

它从服务中调用get方法，然后在oninit结束后调用oninit外部的代码(数据仍在加载和内部订阅，直到现在还未执行)，afterViewInit被执行。

在此期间，无论何时数据从服务到达，您的订阅都会被执行。

查看下面的链接以获得更多的https://www.bennadel.com/blog/3071-synchronous-vs-asynchronous-eventemitters-in-angular-2-beta-14.htm