在开发前端网页时，有时候需要根据浏览器窗口大小的变化，动态地调整网页中某些元素的尺寸或布局。在 Angular 中，我们可以通过监听 window 对象的 resize 事件来实现此功能。
监听 window 对象的 resize 事件
要监听 window 对象的 resize 事件，我们需要在组件中订阅它。在组件的 ngOnInit 生命周期钩子函数中，我们可以使用 HostListener 装饰器来定义一个方法来响应 resize 事件：
------ - ---------- ------------ - ---- ----------------
------------
--------- -------------------
--------- -
---- -------------------------
---- --------- ----- -- -- ----- -- -------
------
--
--
------ ----- ----------- -
----- - ------------------
------------------------------ -----------
--------------- ------ -
---------- - ---------------------------
-
-在这个示例代码中，我们定义了一个名为 MyComponent 的组件，并在其中使用 HostListener 装饰器来监听 window 对象的 resize 事件。当浏览器窗口大小变化时，onResize 方法会被调用。该方法获取事件对象 event，并从中获取 innerWidth 属性，将它赋值给组件的 width 属性。然后，模板中的 div 元素会根据 width 属性的值来设置自己的宽度。
理解 HostListener 装饰器
HostListener 装饰器的语法如下：
-------------------- ------- ------ ------
其中，event 参数指定要监听的事件类型，可以是 DOM 事件或自定义事件。args 参数是一个可选数组，可以传递一些参数给事件处理方法。
HostListener 装饰器通常用于组件类的成员方法上，用来定义对某个事件的监听和响应。被装饰的成员方法会在相应的事件发生时被调用，并传入相应的事件对象作为参数。
总结
通过监听 window 对象的 resize 事件，我们可以实现根据浏览器窗口大小动态调整网页布局的功能。在 Angular 中，我们可以使用 HostListener 装饰器来订阅 resize 事件，定义响应方法，并在方法中更新组件属性和视图。这项技术在响应式设计和移动端开发等场景下有广泛的应用。
示例代码：https://stackblitz.com/edit/angular-window-resize-event
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25165