Angular @ViewChild 在组件类中引用模板中的视图节点

190 阅读1分钟

这个节点既可以是Angular组件, 也可以是HTML元素

在组件类中引用单个模板

截屏2022-03-25 下午8.46.29.png #后边是给模板或者DOM元素起的一个引用名字 以便可以在组件类或模板中进行引用

截屏2022-03-25 下午8.48.10.png

@ViewChild是一个选择器, 用来查找要引用的DOM元素或者组件

ElementRef是DOM元素的一个包装类

因为DOM元素不是Angular中的类,所以需要一个包装类以便在Angular中使用和标识其类型

引用多个模板元素

选中多个img DOM元素

截屏2022-03-25 下午8.37.35.png

截屏2022-03-25 下午8.36.55.png

在AfterViewInit中可以安全地使用@ViewChild引用的元素; 推荐使用Renderer2操作DOM元素

子组件

在当前组件中引用的子组件 ImageSliderComponent

截屏2022-03-25 下午8.43.50.png

截屏2022-03-25 下午8.41.45.png

ngAfterViewInit钩子函数打印的ImageSliderComponent

截屏2022-03-25 下午8.41.21.png