属性选择器，用来从模板视图上获取匹配的元素。可以在ngAfterViewInit中获取到查询的元素。
格式：
ViewChild(selector:string|Function|Type,opts?:{read?:any;static?:boolean}):any
1：元数据属性
selector:
用于查询指令类型或名字。
read:
告诉viewChild返回什么类型的数据，取值可以是ElementRef，TemplateRef，Component，ViewContainerRef等。
static:
默认为false,如果值为false,则是在变更检测之后解析查询结果，值为true，是在变更检测之前解析。
2：常见用法
1：同一个组件，一般不直接使用原生方法操作dom,可以借助viewChild：
<div #divDemo>abc</div>
@ViewChild('divDemo',{read:ElementRef}) divDemo!:ElementRef;
ngAfterViewInit(){
divDemo.nativeElement.style.color = 'red';
}
2：父子组件，当我们需要获取子组件的值和方法的时候
有两种形式：一种是使用放置锚点的方法，一种是引入子组件。
2.1：放置锚点
//子组件test-child.ts
title='初始化的title值';
changeTitle():void {
this.title = '改变了title';
}
//父组件app.html
<app-test-child #testChild></app-test-child>
<button (click)="changeChildTitle()">改变子组件的title值</button>
//父组件app.ts
@ViewChild('testChild'）testChild!:any;
changeChildTitle():void {
this.testChild.changeTitle();
}
2.2：引入子组件
import { TestChildComponent } from './test-child/test-child.component';
@ViewChild(TestChildComponent) testChild!:TestChildComponent;
3：问题
报ExpressionChangedAfterItHasBeenCheckedError错误,需要设置static:true
//父组件
<p>{{testChild.title}}</p>
//报错
//ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'..
{ static: true } 其实就是静态查询,在ngOnInit中可用。
{ static：false } 其实就是动态查询，一般结合*ngIf使用。
viewChildren和viewChild类似,但没有static选项。
返回一个QueryList集合。
<div #divDemo>123</div>
<div #divDemo>456</div>
@ViewChildren ('divDemo') divDemo!:QueryList<ElementRef>;
ngAfterViewInit(){
this.divDemo.forEach(ele=>{
console.log(ele);
})
}
