Angular属性选择器@ViewChild和@ViewChildren学习笔记 有大用

一、前置知识学习

• 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的参数

五、参考文档

• https://segmentfault.com/a/1190000003761054?utm_source=sf-related

• https://segmentfault.com/a/1190000008695459

• https://github.com/kittencup/angular2-ama-cn/issues

来自  https://www.it1352.com/2528588.html