javascript Angular 8 viewChild 返回未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/56435125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 8 viewChild returns undefined
提问by Nesan Mano
I am trying to access the childView instance but it keeps saying the the childView is undefined.
我正在尝试访问 childView 实例，但它一直说 childView 未定义。
Here is my code for childViews:
这是我的 childViews 代码：
@ViewChild(CreateQuestionnaireComponent,{ read: true, static: false }) private childQuestionnaireDialog:CreateQuestionnaireComponent;
@ViewChild(ProjectNavbarComponent,{ read: true, static: false }) private childProjectNavBar:ProjectNavbarComponent;
@ViewChild(QuestionnaireNodeComponent,{ read: true, static: false }) private childQuestionnaireNode:QuestionnaireNodeComponent;
....
onCreateTerminal() {
this.childQuestionnaireDialog.generateQuestionnaireDropDownList();
this.childQuestionnaireDialog.resetFields();
this._hideQuestionnaireDialog = false;
this._modalTitle = 'New Terminal';
this._placeHolderText = 'Terminal Questionnaire Title';
this._terminal = true;
}
...
...
It says :this.childQuestionnaireDialog is undefined".
它说：this.childQuestionnaireDialog 是未定义的”。
It was working with Angular 7.
它正在使用 Angular 7。
As per my new knowledge, the @viewChild takes a flag called static. If we put the flag to true, the parent component tries to get a reference to the childView during its own creation. In other words, we could have an instance of the childView in the onInit() method of the parent Component.Basically a one time access because we won't be able to access in any other methods.
根据我的新知识，@viewChild 采用一个名为 static 的标志。如果我们将该标志设置为 true，则父组件会在自己创建期间尝试获取对 childView 的引用。换句话说，我们可以在父组件的 onInit() 方法中有一个 childView 的实例。基本上是一次访问，因为我们将无法在任何其他方法中访问。
The flag set to false, is basically the new way in ivy renderer.
标志设置为false，基本上是ivy 渲染器中的新方式。
The problem in my case, neither options are working.
就我而言，这两个选项都不起作用。
回答by Manoj De Mel
I had a similar problem where ViewChild component is undefined in onInit() method.
我有一个类似的问题，其中 ViewChild 组件在 onInit() 方法中未定义。
// Ensure Change Detection runs before accessing the instance
@ContentChild('foo', { static: false }) foo!: ElementRef;
// If you need to access it in ngOnInit hook
@ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;
回答by Hardik Patel
You must be trying to access the results of a ViewChild query before the view has completed initializing.
您必须在视图完成初始化之前尝试访问 ViewChild 查询的结果。
So, you can either mark the query static:
因此，您可以将查询标记为静态：
@ViewChild('test', {static: true}) test: ElementRef;
... or move the logic to ngAfterViewInit (preferred).
...或将逻辑移至 ngAfterViewInit （首选）。
回答by Jesse
According to the docs, the metadata property readis:
根据docs，读取的元数据属性是：
`read - read a different token from the queried elements.`
In other words, it's used if you want to read in ViewContainerRefor the Component name instead of the normal ElementRef(which is the default if you leave readout). So putting trueas the value is saying to return type truefrom the element, which as far as I know is impossible.
换句话说，如果您想读入ViewContainerRef或组件名称而不是正常名称ElementRef（如果您read省略，这是默认值），则使用它。因此，true作为值的意思是true从元素返回类型，据我所知这是不可能的。
A much better explanation is here, but the short answer to your problem is take out the readproperty or to specify ElementRefor the specific type you want.
更好的解释是here，但对您的问题的简短回答是取出read属性或指定ElementRef或您想要的特定类型。
回答by Pogrindis
Slightly different issue on my side, so adding for posterity.
我这边的问题略有不同，因此为后代添加。
I was initially implementing a @ViewChildand within the scope of the component everything was alright as normal.
我最初@ViewChild是在组件范围内实现的，一切正常。
However I was implementing a event subscription to triger a method on the child using this.action()withing the event, which lost its reference via the event. (Bad eventing on my side)
但是，我正在实现一个事件订阅，以使用 with 事件在孩子上触发一个方法，this.action()该事件通过事件丢失了它的引用。（我这边的不良事件）
Strange one for me, but one solution (not the best fix but before the event manager refactor) was to pass through the reference to this at subscription creation time.
对我来说很奇怪，但一种解决方案（不是最佳解决方案，但在事件管理器重构之前）是在订阅创建时传递对 this 的引用。
var self = this; // var because we want it to stick around.
subscription.event.subscribe(()=>{
self.callOnThisRef();
})
I'm sure this is by design as it highlighted the problems with my event management. But it was strange to debug.
我确定这是设计使然，因为它突出了我的活动管理问题。但是调试起来很奇怪。
