Angular中@ViewChild的作用及动态组件加载相关疑问

1. @ViewChild与视图查询的实际作用 #

视图查询的本质就是在当前组件的模板中，定位你指定的元素、指令或子组件，将其对应的实例引用返回给组件类调用。@ViewChild就是Angular提供的用于实现视图查询的属性装饰器。

你可以把它理解成模板和组件类之间的「寻址工具」：比如你在模板里写了一个带标识的输入框<input #usernameInput>，你就可以通过@ViewChild('usernameInput') inputRef!: ElementRef<HTMLInputElement>拿到这个输入框的DOM引用，在组件类里直接调用inputRef.nativeElement.focus()让输入框自动聚焦，这就是@ViewChild最基础的用法。

你示例代码中的@ViewChild(AdDirective, {static: true}) adHost!: AdDirective作用就是：在ad-banner组件的模板里，找到挂载了adHost指令的元素，将对应的AdDirective实例赋值给组件的adHost属性。其中static: true表示这个元素是静态存在的，不会被*ngIf等结构指令动态移除，在ngOnInit生命周期阶段就可以获取到该引用。

2. AdDirective的作用 #

你看到的「空指令」并不是没有作用，它的核心价值是获取宿主元素的容器引用：Angular的指令可以注入它所挂载的宿主元素的各类上下文引用，这里AdDirective直接注入了宿主元素的ViewContainerRef并且设为公共属性，你拿到AdDirective实例的同时就能获取到对应位置的容器操作入口。

3. ViewContainerRef的含义 #

ViewContainerRef不是你要使用的子组件本身，它是Angular提供的动态内容容器操作入口，你可以理解成它就是模板中<ng-template adHost>这个占位位置的「管理员」：

• viewContainerRef.clear()：清空该容器内之前渲染的所有动态内容
• viewContainerRef.createComponent()：在该容器的位置渲染你指定的动态组件，返回的componentRef才是你渲染出来的子组件实例，你可以通过componentRef.instance给子组件传递输入参数。

4. 示例代码逻辑梳理 #

整个动态广告轮播的逻辑非常清晰：

1. 模板里的<ng-template adHost>是广告位的占位符
2. 通过@ViewChild拿到AdDirective实例，进而拿到占位符的容器操作入口viewContainerRef
3. 定时切换广告时，先清空容器里的旧广告，再创建新的广告组件插入到容器中，给新组件传入广告数据完成渲染

内容的提问来源于stack exchange，提问作者Andrew