Angular 5响应式侧边导航：窗口缩小时修改HTML内容问题

我来帮你搞定这个问题！你之前用ng-model和原生JavaScript没成功，主要是因为ng-model本来就不是用来绑定普通元素文本的（它主要针对表单控件的双向绑定），而原生JS监听resize在Angular里如果处理不好还容易引发内存泄漏。下面给你两种适合Angular场景的解决方案：

方案一：用Angular CDK的BreakpointObserver（推荐） #

这是Angular官方推荐的响应式布局工具，能自动处理媒体查询，不用手动管理事件监听，非常优雅。

步骤1：安装Angular CDK（如果还没装） #

在项目根目录执行命令：

npm install @angular/cdk --save

步骤2：组件代码实现 #

在你的导航组件的.ts文件里导入相关模块并实现逻辑：

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-your-nav-component', // 替换成你的组件选择器
  templateUrl: './your-nav-component.component.html',
  styleUrls: ['./your-nav-component.component.css']
})
export class YourNavComponent {
  // 用Observable来监听屏幕尺寸变化
  isMobile$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 监听窗口宽度是否小于1080px（注意这里用max-width:1079px，因为小于1080的话就是<=1079）
    this.isMobile$ = this.breakpointObserver.observe('(max-width: 1079px)')
      .pipe(
        map(result => result.matches)
      );
  }
}

步骤3：模板中切换文本 #

在你的HTML模板里用异步管道async来订阅Observable，动态切换文本：

<div id="nav-left">
  <mat-list>
    <mat-list-item>
      <a id="elp1" [routerLink]="['/']" fragment="intro-text">
        {{ (isMobile$ | async) ? '短文本' : 'Welcome' }}
      </a>
    </mat-list-item>
    <!-- 其他导航项可以用同样的方式处理 -->
  </mat-list>
</div>

方案二：手动监听窗口resize事件 #

如果不想引入Angular CDK，也可以手动监听resize事件，但要记得在组件销毁时移除监听，避免内存泄漏。

组件代码实现 #

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

@Component({
  selector: 'app-your-nav-component',
  templateUrl: './your-nav-component.component.html',
  styleUrls: ['./your-nav-component.component.css']
})
export class YourNavComponent implements OnInit, OnDestroy {
  isMobile = false;
  // 存储resize事件的处理函数，方便后续移除
  private resizeHandler: () => void;

  ngOnInit() {
    // 初始化时先判断一次屏幕尺寸
    this.checkScreenSize();
    // 定义resize事件处理函数
    this.resizeHandler = () => this.checkScreenSize();
    // 添加监听
    window.addEventListener('resize', this.resizeHandler);
  }

  ngOnDestroy() {
    // 组件销毁时移除监听，防止内存泄漏
    window.removeEventListener('resize', this.resizeHandler);
  }

  private checkScreenSize() {
    // 判断窗口宽度是否小于1080px
    this.isMobile = window.innerWidth < 1080;
  }
}

模板中切换文本 #

这次直接用布尔变量isMobile就行，不用异步管道：

<div id="nav-left">
  <mat-list>
    <mat-list-item>
      <a id="elp1" [routerLink]="['/']" fragment="intro-text">
        {{ isMobile ? '短文本' : 'Welcome' }}
      </a>
    </mat-list-item>
  </mat-list>
</div>

额外说明 #

• 不要用ng-model来绑定普通元素的文本，它只适用于input、select这类表单控件的双向绑定。普通元素的文本用插值表达式{{}}就足够了，安全又简单。
• 方案一的BreakpointObserver还支持预定义的断点，比如Breakpoints.Handset，你可以根据需求替换成适合的断点。

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