Angular 中的多个模板引用变量

Question

在我的组件模板输入元素之一中，我创建了两个不同的引用变量，如下所示：

<input type="text" placeholder="..." #typeAhead="ngbTypeahead"
       #relationTypeInput>

P.S：这不是确切的代码，但我的实际代码与此类似

在组件ts文件中，这些变量声明如下：

@ViewChild('typeAhead') typeAhead: NgbTypeahead;
@ViewChild('relationTypeInput') relationTypeInput: ElementRef;

然后我在 ngOnInit() 中使用前一个，在 ngAfterViewInit() 中使用后一个。令我惊讶的是我没有收到任何错误并且它正在工作，但我不明白如何？

Answer 1

这是因为 #typeAhead 不是对元素的引用，在本例中是 input。这就是为什么它在 ngOnInit 运行时定义，而 #relationTypeInput 不运行。

Answer 2

在 Angular (v10+) 的更高版本中，您需要使用 ngAfterViewInit

直到 v7，Angular 声明 ngOnInit 不是一个可靠的生命周期挂钩，从中引用 ViewChild 属性，但众所周知它是可靠的。在 v8/9 中，您需要向 ViewChild 添加选项 {static: true} 以允许在 ngOnInit 中引用属性 - 但这对属性（例如，在那之后它永远不会更新）

您可以在此处阅读更多相关信息 https://angular.io/guide/static-query-migration

Angular 中的多个模板引用变量

Multiple template reference variable in Angular

angular2-template

angular