徐姣 2020年11月27日
一、前置知识学习
Angular一共提供了19中内置的装饰器，其中有5个类装饰器、6个属性装饰器、2个方法装饰器和6个参数装饰器。
我们今天学习梳理的@ViewChild属于属性装饰器的一个
-
属性装饰器的作用是什么：简单的说是对Class中的属性进行一些操作。
// 比如：@Input()这个装饰器用来对username进行操作，将父组件中传下来的值username赋值给username这个属性 @Input() username:string; // 当然我们还可以自定义一些属性装饰器。比如在下面实现的@Emoji()，这就是一个属性装饰器。
二、@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明确指定。
2.2.2 selector：用于查询指令的类型和名字
一个字符串， 如果没有提供read参数确切的告知返回的元素是什么类型，则其返回实例类型安装以下顺序：
- ElementRef实例, : (对于每个元素，都有一个ElementRef和ViewContainerRef)
- 如果没有对应的ElementRef， 则匹配同名的组件
2.2.3 static， 一个标志符，告诉检测器是否容许从动态模板中获取满足条件的元素或者指令
- 动态模板有哪些？如*ngIf标志的
- 使用：@ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;
- 设置static: true将不允许您从动态模板分辨率 。
- 将static标志设置为true， 将在ngOnInit中创建视图。？？？待验证
- 在Angular9中 { static: false } 是默认选项
2.3 支持哪些选择器
我们支持@ViewChild支持从视图中选择出一个元素或者指令。那么它支持哪些选择器呢？（可以查询哪些东西？）
- 任何带有
@Component或@Directive装饰器的类 - 字符串形式的模板引用变量（比如可以使用
@ViewChild('cmp')来查询 <my-component #cmp></my-component> - 组件树中任何当前组件的子组件所定义的提供商（比如
@ViewChild(SomeService) someService: SomeService） - 任何通过字符串令牌定义的提供商（比如
@ViewChild('someToken') someTokenVal: any） -
TemplateRef（比如可以用@ViewChild(TemplateRef) template;来查询 <ng-template> </ng-template>
2.4 使用时需要注意的点
- @ViewChild的视图查询是在调用 NgAfterViewInit回调函数之前。这意味着我们只有在NgAfterViewInit函数中才能确保获取到正确的查询元素
三、案例说明
3.1 @ViewChild如果可以匹配多个元素的话，会将匹配到的第一个返回（未指定read）
## 第一种场景
<ng-template #myLabel></ng-template>
<app-pwd-form #myLabel></app-pwd-form>
// 这里的myLabel VSCode会提示错误，但是编译不会报错
@ViewChild('myLabel') temp;
ngAfterViewInit(): void {
console.log(this.temp);
}
/**
* 这里输出的结果是：
TemplateRef {_declarationLView: LComponentView_AppComponent(34),
_declarationTContainer: TNode, elementRef: ElementRef}
**/
## 第二种场景: 将组件放到上面
<app-pwd-form #myLabel></app-pwd-form>
<ng-template #myLabel></ng-template>
@ViewChild('myLabel') temp;
ngAfterViewInit(): void {
console.log(this.temp);
}
/**
* 这里输出的结果是：PwdFormComponent {__ngContext__:
LComponentView_AppComponent(34)}
**/
## 第三种场景：使用组件选择器
@ViewChild(PwdFormComponent) temp: PwdFormComponent;
ngAfterViewInit(): void {
console.log(this.temp);
}
/**
* 这里输出的结果是： PwdFormComponent {__ngContext__: LComponentView_AppComponent(34)}
**/
3.2 read的作用：
官方解释是： 从查询到的元素中读取另一个令牌 。最终目的是获取不同类型的实例
read参数是可选的，因为 Angular 会根据 DOM 元素的类型推断出该引用类型。 一般Angular会推断出一些比较简单的类型如：
ElementRef、TemplateRef、一些引用类型如
ViewContainerRef就不可以被 Angular 推断出来，所以必须在read参数中显式声明其他的如
ViewRef不可以挂载在 DOM 元素中，所以必须手动在构造函数中编码构造出来。如果最终转换不了对应的类型，则返回undefined。
3.3 关于参数static
<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); // 输出undefined
}
四、@viewChildren学习梳理
作用： 配置一个视图查询
返回的是一个匹配的QueryList（ 一个不可修改的条目列表，当应用状态变化时，Angular 会保证它是最新的。 ）
-
参数说明
- selector ： 和@viewchild一样
- read ： 和@viewchild一样
-
@viewChildren和@viewchild的区别：
- @viewChildren返回的是一个列表，而@viewchild返回的是一个元素或者是一个指令
- @viewChildren没有static的参数
