使用@HostListener时，组件的Host element是什么？

一、组件的宿主元素是什么？ #

组件的宿主元素就是你在模板中通过组件选择器渲染出的那个DOM元素。以你的代码为例，组件选择器是ec-header，当你在父组件模板里写 <ec-header></ec-header> 时，页面上生成的这个 <ec-header> 标签对应的DOM节点，就是 HeaderComponent 的宿主元素。

简单来说，指令的宿主元素是指令附着的元素，而组件的宿主元素就是组件自身被使用时生成的根DOM元素——组件的模板内容会被渲染到这个宿主元素内部。

二、你的代码工作原理拆解 #

你的代码核心是监听窗口大小变化，动态更新组件的size属性，逐部分说明如下：

1. 初始化size：构造函数中调用getSize()，根据当前窗口宽度（window.innerWidth）判断，将size设为s（宽度小于1024px）或m（宽度≥1024px），完成初始值设置。

2. 订阅认证状态：ngOnInit中通过store.select(selectIsAuth)获取认证状态的Observable，后续可在模板中用async管道订阅该值，展示对应内容。

3. @HostListener的作用：

   • @HostListener('window:resize') 是Angular提供的装饰器，不仅能监听宿主元素自身的事件，还支持监听全局事件（比如window、document的事件）。这里就是监听窗口的大小变化事件。
   • 每当窗口尺寸改变时，会触发onResize()方法，再次调用getSize()更新size的值。
   • 因为你设置了changeDetection: ChangeDetectionStrategy.OnPush，当size这个组件属性发生变化时，Angular会触发变更检测，更新组件视图中依赖size的部分。

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