Angular 中的多个模板引用变量

Question

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

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

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

在组件 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