Angular中不同组件路由时@HostListener表现不一致是什么原因？

问题根因 #

你的逻辑仅在window.resize事件触发时才更新状态变量k，组件初始化阶段没有主动校验当前窗口宽度完成赋值：

• 路由跳转加载新组件时，只要没有触发窗口尺寸调整动作，k会一直保持初始默认值false，因此始终应用mdc-fab--extended类，和当前实际窗口宽度不匹配。

修复方案 #

在组件初始化生命周期钩子ngOnInit中主动执行一次窗口宽度判断，给k赋正确的初始值即可，调整后的TS代码如下：

import { Component, HostListener, OnInit } from '@angular/core';

@Component(...)
export class FooComponent implements OnInit {
  k: boolean;

  ngOnInit(): void {
    // 组件初始化主动判断当前窗口宽度
    this.updateBreakpointStatus();
  }

  @HostListener('window:resize')
  onResize(): void {
    this.updateBreakpointStatus();
  }

  // 公共方法抽离，避免重复写判断逻辑
  private updateBreakpointStatus(): void {
    this.k = window.innerWidth <= 768;
  }
}

多组件复用优化建议 #

你有4个组件都用到了相同的断点判断逻辑，可以将该逻辑抽为公共复用逻辑，减少重复代码：

• 抽为属性型指令：直接挂载到按钮元素上，内部自动处理类名切换，不需要每个组件单独维护k变量和监听逻辑
• 抽为响应式服务：基于RxJS封装全局窗口尺寸监听，所有组件订阅即可拿到实时断点状态

如果项目用到了Angular服务端渲染（SSR），需要额外注入PLATFORM_ID判断当前运行环境是否为浏览器，避免服务端运行时访问window对象报错。

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