angular中进行dom操作

使用装饰器@viewChild声明一个变量绑定相应子组件或dom元素

• 如果绑定的是子组件，就是会获取到一个子组件实列
• 如果绑定的是元素，就是获取一个封装的ElementRef类
  • 通过nativeElement包装属性直接访问真实dom元素
  • 生命周期管理（当组件销毁时，就会清除elementRef，避免内存泄漏）
  • 类型安全，无需要手动定义类型声明
  • 也是angular抽象层一部分
• 定义时的配置项（static）
  • static:true表示静态查询，会在组件初始化后立即尝试获取对应的子组件或元素。适合静态组件结构，不会随着条件变化而动态加载或移除
    • 组件初始化完成后(ngOnInit时，angular9之后版本才可)，就可以访问相应元素
    • 可能导致访问失败情况：
      • 查询的元素是动态加载的
      • 查询的元素使用了ngIf指令
      • 显然ngOnInit之前的钩子是访问不了，例如construct中使用
      • 其他异步行为
  • static:false表示动态查询，Angular 视图初始化后，ngAfterViewInit 生命周期钩子触发后进行查询。
    • 在ngAfterView钩子里面就可以访问相应元素