Xu Jiao November 27, 2020

First, pre-knowledge learning

  • Angular provides 19 built-in decorators, including five class decorators, six property decorators, two method decorators, and six parameter decorators.

  • The @viewChild that we’re going to tease out today is one of those property decorators

  • What property decorators do: They simply perform operations on properties in a Class.

    // The @input () decorator is used to operate on username, assigning the value passed from the parent component to the property
@Input() username:string;
// We can also customize some property decorators. For example, the @emoji () implementation below is a property decorator.
Copy the code

2, @viewChild learn to comb

2.1 what does @viewChild do

  • @viewChild is an Angular property decorator that gets matched elements from template views. Used to configure a view query.
  • The change detector looks in the VIEW’s DOM for the first element or instruction that matches the selector.
  • This property is updated if the VIEW’s DOM changes and a new child node matches the selector.

2.2 @viewChild Parameter Description

// Assign the first element or instruction queried to selector
@ViewChild('searchText', {read: ElementRef, static: false})  selector; 
Copy the code
2.2.1 Read: Tell @viewChild what type of data you are returning
// I want to query the original with # myName and return the ViewContainerRef type
@ViewChild('myname', {read: ViewContainerRef}) target; 
Copy the code
  • If you want something different, you need to usereadExplicitly specify.
2.2.2 Selector: Used to query the type and name of an instruction

A string that returns instance types in the following order if no read argument is provided to tell exactly what type the element is returned:

  • ElementRef instance, : (For each element, there is an ElementRef and ViewContainerRef)
  • If there is no corresponding ElementRef, the component with the same name is matched
2.2.3 Static: a flag that tells the detector whether to allow elements or directives to be retrieved from the dynamic template
  • What are dynamic templates? Such as *ngIf flag
  • Use: @viewChild (TemplateRef, {static: true}) foo! : TemplateRef;
  • Setting static: true will not allow you to resolve from dynamic templates.
  • Setting the static flag to true creates a view in ngOnInit.????? To verify the
  • {static: false} is the default in Angular9

2.3 Which selectors are supported

We support @ViewChild and we support selecting an element or a directive from a view. So what selectors does it support? (What can I query?)

  • Anything with a@Component 或 @DirectiveDecorator class
  • A template reference variable in the form of a string (e.g@ViewChild('cmp')<my-component # CMP >
  • Providers defined by children of any current component in the component tree (e.g@ViewChild(SomeService) someService: SomeService ）
  • Any provider defined by a string token (e.g@ViewChild('someToken') someTokenVal: any ）
  • TemplateRef(E.g@ViewChild(TemplateRef) template;To query

2.4 Points needing attention when using

  • The view query for @viewChild is made before the NgAfterViewInit callback is called. This means that only in the NgAfterViewInit function can we ensure that we get the correct query elements

Case description

3.1@viewChild If multiple elements can be matched, the first matching element will be returned (no read specified).

<ng-template #myLabel></ng-template> <app-pwd-form #myLabel></app-pwd-form> @viewChild ('myLabel') temp; ngAfterViewInit(): void { console.log(this.temp); } /** * TemplateRef {_declarationLView: LComponentView_AppComponent(34), _declarationTContainer: ElementRef: elementRef} **/ ## <app-pwd-form #myLabel></app-pwd-form> <ng-template #myLabel></ng-template> @viewChild ('myLabel') temp; ngAfterViewInit(): void { console.log(this.temp); } /** * the output is: PwdFormComponent {__ngContext__: LComponentView_AppComponent(34)} @viewChild (PwdFormComponent) temp: PwdFormComponent; ngAfterViewInit(): void { console.log(this.temp); /** * PwdFormComponent {__ngContext__: LComponentView_AppComponent(34)} **/Copy the code

3.2 Functions of Read:

  • Read another token from the element in the query. The ultimate goal is to get instances of different types

  • The read parameter is optional because Angular deduces the reference type from the type of the DOM element. Angular extrapolates simple types such as ElementRef, TemplateRef,

  • Some reference types, such as ViewContainerRef, cannot be inferred by Angular and must be explicitly declared in the read parameter

  • Others, such as viewrefs, cannot be mounted in DOM elements, so they must be manually encoded in constructors.

  • If the type cannot be converted, undefined is returned.

3.3 About the Static Parameter

<app-pwd-form #myLabel *ngIf="true"></app-pwd-form> <ng-template #myLabel *ngIf="true"> <span >xxxx</span> </ng-template> @ViewChild(PwdFormComponent, {static: true}) temp: PwdFormComponent; ngAfterViewInit(): void { console.log(this.temp); // output undefined}Copy the code

Iv. Reference documents

  • Segmentfault.com/a/119000000…

  • Segmentfault.com/a/119000000…

  • Github.com/kittencup/a…