As a beginner who has just started to learn Angular, I have seen it in the project with Angular as the development framework @ViewChild and Code of ElementRef. Because I learned while doing, I felt a little confused, strange and curious when I saw it for the first time. Under the guidance of partners and their own reference, they have a general understanding of the two, and completed the development requirements in the project.

@ViewChild

Now my understanding of @ ViewChild is that the parent component wants to use or operate the child component, such as the method of executing the child component, or obtain the properties of the child component.

View is to see, and Child is to see the Child. If you look at the Child, it must be the father who looks after the Child.

In other words, @ ViewChild is used by the parent component to "see" the child component.

@ViewChild uses a

When ViewChild passes in the child component ChildComponent, that is, inject the child component into the parent component to obtain the properties or methods of the child component

childComponent.ts

import { Component } from '@angular/core';

@Component({
	selector:'app-child',
	templateurl:'bababa',
	styleUrls:'bababab',
})
export class ChildComponent{
	childFunction(){
		console.log('this function is from childComponent');
	}
}

parentComponent.ts

import { Component } from '@angular/core';
import { ViewChild } from '@angular/core';
import { ChildComponent } from '..../Directory of subcomponents';

@Component({
	selector:'app-parent',
	templateurl:'bababa',
	styleUrls:'bababab',
})
export class ParentComponent{
	@ViewChild(ChildComponent) child : ChildComponent;
	
	parentFunction(){
		console.log('this function is from parentComponent')
		this.child.childFunction();
	}
}

In the parent component, be careful not to forget the preparatory work. Import ViewChild and child components

import { ViewChild } from '@angular/core';
import { ChildComponent } from '..../Directory of subcomponents';

At this time, the child component passed in by ViewChild is ChildComponent, which is saved in the variable child

@ViewChild(ChildComponent) child : ChildComponent;

In this way, you can use the methods in the subcomponent.

@ViewChild uses two

When the ViewChild passes in a string, the child component is anchored, and the parent component obtains the properties or methods of the child component through the anchor position

It's only necessary to mark the anchor point when using the child component, that is:

<app-child #child>I am a childComponent</app-child>

In addition, it is written in the ts of parent component:

export class ParentComponent{
	@ViewChild('child') child : any; //Find the anchor point of child
	
	parentFunction(){
		console.log('this function is from parentComponent')
		this.child.childFunction();
	}
}

Summary

Recently, it was found in the project that the use of @ ViewChild mostly uses anchor point. It may be that I haven't contacted enough relevant projects, and the law summarized may not be very typical.

When I practice in the project, I need to find the relationship between these parent-child components and see anchor points, such as:

<app-child #child>I am a childComponent</app-child>

Then I know that this parent component uses some attribute or method in the child component whose selector is app child. Then I'll search app child, look back at the ts of the parent component and compare it. I can know how the parent component operates the child component.

ElementRef

ElementRef was also learned when I learned about @ ViewChild, because I found that they would be used together in the project.

ElementRef, in my current understanding, I think it is used to operate DOM, do some operations on DOM nodes, change font, color, and so on.

Look at the use of ElementRef

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

export class AppComponent {
 	constructor(private elementRef: ElementRef) { } 
 	ngAfterViewInit() { 
		console.dir(this.elementRef.nativeElement.querySelector('div'));
		this.elementRef.nativeElement.querySelector('div').style.color='red';
 }
}

It's simple

1. Import ElementRef,AfterViewInit
2. Register private elementRef:ElementRef in constructor
3. Use elementRef in the ngAfterViewInit hook
4. this. elementRef. Get DOM from nativelement

@ViewChild and ElementRef combine to operate the DOM of sub components

@ViewChild is the parent component to access the child component, and ElementRef can be used to operate DOM. When the two are used together, the parent component can operate the DOM of the child component.

Omit the preparatory work, and the core part is as follows:

<app-child #Child > < / APP child > / / anchor sub components

@ViewChild('child',{ static:true }) eleRef : ElementRef;

//Or is it used in ngAfterViewInit
ngAfterViewInit(){
	let ele = this.eleRef.nativeElement;
	ele.color = 'red';
}