浅谈Angular中@ViewChild的用法

1 前置知识学习

@ViewChild是Angular一共提供的内置的装饰器

Angular提供的内置装饰器分为：类装饰器、属性装饰器、方法装饰器和参数装饰器

@ViewChild属于属性装饰器的一个

ViewChild 用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，才能正确获取查询的元素。

@Input() username:string;
// @Input()这个装饰器用来对username进行操作，将父组件中传下来的值username赋值给username这个属性

// 当然我们还可以自定义一些属性装饰器。比如在下面实现的@Emoji()，这就是一个属性装饰器。

2 @ViewChild学习梳理

2.1 @ViewChild作用是什么

• @ViewChild是Angular提供的用来从模板视图中获取匹配元素的一个属性装饰器。 用于配置一个视图查询。
• 变更检测器会在视图的 DOM 中查找能匹配上该选择器的第一个元素或指令。
• 如果视图的 DOM 发生了变化，出现了匹配该选择器的新的子节点，该属性就会被更新。

2.2 @ViewChild的参数说明

// 将查询到的第一个元素或者指令赋值给selector
@ViewChild('searchText', {read: ElementRef, static: false})  selector; 

2.2.1 read: 告诉@ViewChild你返回的是什么类型的数据

// 我想通过#myname去查询原始，并将返回ViewContainerRef类型
@ViewChild('myname', {read: ViewContainerRef}) target; 

• read参数是可选的，因为 Angular 会根据 DOM 元素的类型推断出该引用类型。 一般Angular会推断出一些比较简单的类型如： ElementRef 、 TemplateRef
• 一些引用类型如 ViewContainerRef 就不可以被 Angular 推断出来，所以必须在 read 参数中显式声明

一个字符串， 如果没有提供read参数确切的告知返回的元素是什么类型，则其返回实例类型按照以下顺序：

• ElementRef实例, : (对于每个元素，都有一个ElementRef和ViewContainerRef)
• 如果没有对应的ElementRef， 则匹配同名的组件

2.2.1 static

…（还不确定后续再补）

3 @ViewChild的使用

3.1 获取本html页面DOM元素

html
<input type="text" #myInput>

ts
方法一：
import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('myInput') input;  ==> @ViewChild('myInput') input: ElementRef；
ngAfterViewInit() {
    console.dir(this.input);
} 

this.input.nativeElement.focus();  // 获取焦点

3.2 通过@ViewChild获取子组件，得到子组件的值、调用子组件的方法

子组件child

content:'Zita';

changeChildCon() {
    this.content = 'Zita1111'
}

父组件parent：

html
<app-child #ChildrenView></app-child>

ts
import { ViewChild } from '@angular/core';
@ViewChild('ChildrenView', { static: true }) aaaChildrenView: any;  
//ChildrenView为子组件中的#后边的值，aaaChildrenView是个名称用来指代子组件

this.childrenView.content   // Zita  获取子组件中的值
this.childrenView.changeChildCon()  // 执行子组件中的方法
this.childrenView.content   // Zita1111