Angular中的多个模板引用变量答案

【问题标题】：Multiple template reference variable in AngularAngular中的多个模板引用变量
【发布时间】：2020-08-13 16:13:41
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

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

【讨论】：

感谢您的回答@Chrillewoodz，您能否解释一下为什么#typeAhead 在这里不是参考？是因为它是 NgbTypeahead 类型吗？
@BijaySingh 我假设NgbTypeahead 是一个指令，所以它是对指令本身而不是输入元素的引用。

【解决方案2】：

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

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

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

【讨论】：