1

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

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

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

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

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

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

4

2 回答 2

4

这是因为#typeAhead不是对元素的引用，在这种情况下是input. 这就是为什么它在ngOnInit运行时定义，而#relationTypeInput不是。

于 2018-05-23T07:19:01.107 回答
2

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

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

你可以在这里阅读更多关于它的信息https://angular.io/guide/static-query-migration

于 2020-08-13T08:13:41.727 回答