angular - 是否有一个生命周期钩子(Hook)在组件初始化后运行一次，也在加载双向绑定(bind)后运行一次？

Question

我试图在组件初始化后在输入字段中选择一些文本。我知道我可以使用 setTimeout() 来做到这一点，但这感觉有点太老套了。

大多数 Hook 在通过双向绑定(bind)加载输入文本之前运行。每当有人选择其他字段时，其他字段也会运行。

代码:https://stackblitz.com/edit/angular-pxrssq

import { Component, OnInit, Input, ViewChild } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <input #input type="text" [(ngModel)]="info.one"/>
    <input type="text" [(ngModel)]="info.two"/>`,
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() info;
  @ViewChild('input', {static: true} ) input;

  constructor() { }

  ngOnInit() {
    this.input.nativeElement.select();
  }

}

是否有一个生命周期钩子(Hook)在组件初始化后、加载双向绑定(bind)后运行一次？

Answer 1

事实上，使用setTimeout()并不是一个hacky解决方案，而是解决方案。因为angular's unidirectional data flow rule .

Angular's unidirectional data flow rule forbids updates to the view after it has been composed.

为了观察此规则的后果，请尝试为 AfterViewInit Hook 上的 ChildComponent 的 info 属性分配一个新值。你会得到一个ExpressionChangedAfterItHasBeenCheckedError，这是 Angular 的说法，“禁止在 View 组成后更新 View !”

由于您没有更新组件的任何数据绑定(bind)属性，而只是进行 dom 操作，因此 Angular 不会抛出任何错误，但它也没有反射(reflect)您对 dom 的更改。

回到你的问题；

Is there a lifecycle hook that runs once after a components initialisation, but after two-way-binding is loaded?

是的，有，就是AfterViewInit钩。因为；

View queries are set before the ngAfterViewInit callback is called.

和 DOM 更新是在调用 ngAfterViewInit 之前处理的，如 here 中所述。 .

它来了after OnChanges钩子(Hook)，其中；

OnChanges is called when any data-bound property of a directive changes.

因此，如果您希望在第一次加载组件时仅选择文本一次，您应该执行以下操作。

ngAfterViewInit() {
  setTimeout(() => this.input.nativeElement.select());
}

如果您想在父组件更改 input 属性(包括首次加载)时选择文本，那么您需要实现 OnChanges Hook 。

ngOnChanges() {
  setTimeout(() => this.input.nativeElement.select());
}

这是一个工作演示 https://stackblitz.com/edit/angular-owahps

希望有帮助。