javascript - How to use ViewChild correctly - Stack Overflow

admin管理员组

文章数量:1315258

This Angular app consists of only app-root ponent with a single <div> and a <button>.

When a button is clicked the onClick() function logs to console the div_a object with:

console.log("...onClick() div_a:", this.div_a);

with div_a defined with following statement:

@ViewChild('div_a', { static: false }) div_a: Component;

Question: why both the ngOnInit and constructor functions logs that the div_a is undefined? How to fix the problem of these functions of not being able to use div_a object?

Below is the link to Stackblitz project (please note that the GitHub branch that is linked to this stackblitz project needs to be switched from master to qViewChild branch).

ponent.html

This Angular app consists of only app-root ponent with a single <div> and a <button>.

When a button is clicked the onClick() function logs to console the div_a object with:

console.log("...onClick() div_a:", this.div_a);

with div_a defined with following statement:

@ViewChild('div_a', { static: false }) div_a: Component;

Question: why both the ngOnInit and constructor functions logs that the div_a is undefined? How to fix the problem of these functions of not being able to use div_a object?

Below is the link to Stackblitz project (please note that the GitHub branch that is linked to this stackblitz project needs to be switched from master to qViewChild branch).

https://stackblitz./edit/angular-r9hwbs?file=src%2Fapp%2Fwidget-a%2Fwidget-a.ponent.html

• javascript
• angular
• typescript

Share Improve this question Follow edited Feb 5, 2020 at 1:25 alphanumeric asked Feb 5, 2020 at 0:27 alphanumericalphanumeric 19.4k7474 gold badges277277 silver badges421421 bronze badges 2

• Rather than ngOnInit or the constructor you need to look at the ngAfterViewInit lifecycle hook, when ViewChild element will have been evaluated. Also - I think that stackblitz link you posted is not right, doesn't seem to match your example code in the question (might be the wrong link?) – Garth Mason Commented Feb 5, 2020 at 0:42
• Thanks for your ment! The GitHub branch that is linked to the stackblitz project needs to be switched to qViewChild – alphanumeric Commented Feb 5, 2020 at 1:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Based on the docs, ViewChild and ViewChildren queries are run before AfterViewInit, so you'll need to access them there. Just accessing div_a won't work unless you tag it in the template.

Among others, the children you can access are:

• Any class with the @Component or @Directive decorator
• A template reference variable as a string (e.g. query <my-ponent #cmp></my-ponent> with @ViewChild('cmp'))

So you'll need something like this:

<p #myPara>
  Start editing to see some magic happen :)
</p>

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent implements AfterViewInit  {
  @ViewChild('myPara', {static: false}) paragraph;


  ngAfterViewInit() {
    console.log(this.paragraph) // results in -> ElementRef {nativeElement: p}
  }
}

Blitz

When using @ViewChild DO NOT use ngOnInit or constructor because it is not yet loaded. Use the ngAfterViewInit()

本文标签： javascriptHow to use ViewChild correctlyStack Overflow