如何在tabset标签页头部添加适配屏幕分辨率的ng-if指令

嘿，我来帮你搞定这个响应式文本的问题！你之前用ng-if加三元表达式没成功，大概率是因为没处理好屏幕尺寸变化的监听，或者指令用法不对——毕竟ng-if需要的是布尔值判断，直接塞三元字符串肯定不行，而且静态判断窗口尺寸的话，窗口resize时也不会自动更新。

下面给你两种靠谱的实现方案，优先推荐第一种Angular官方的做法：

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

这是Angular官方专门用来处理响应式断点的工具，不用手动监听resize，还能自动避免内存泄漏，非常优雅。

步骤1：导入依赖 #

首先确保你的项目里已经安装了@angular/cdk，然后在组件的模块里导入LayoutModule：

// 比如在app.module.ts或者你的组件模块里
import { LayoutModule } from '@angular/cdk/layout';

@NgModule({
  imports: [
    // ...其他模块
    LayoutModule
  ]
})
export class YourModule { }

步骤2：组件类里监听断点 #

在你的tab组件类中，注入BreakpointObserver，创建一个可观察对象来判断屏幕是否小于等于480px：

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

@Component({
  selector: 'your-tab-component',
  templateUrl: './your-tab.component.html'
})
export class YourTabComponent {
  // 用可观察对象存储屏幕状态
  isSmallScreen$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {
    // 监听(max-width: 480px)这个断点
    this.isSmallScreen$ = this.breakpointObserver.observe('(max-width: 480px)')
      .pipe(map(result => result.matches));
  }
}

步骤3：模板里使用async管道显示文本 #

在tabset的模板中，用async管道订阅这个可观察对象，动态切换文本：

<tabset>
  <tab>
    <!-- 如果是用自定义tab标题模板 -->
    <ng-template tabHeading>
      {{ (isSmallScreen$ | async) ? 'SOLES' : 'CREDIT LINE' }}
    </ng-template>
    <!-- 你的tab内容 -->
  </tab>
</tabset>

如果你的tab组件支持直接绑定heading属性，也可以这么写：

<tabset>
  <tab [heading]="(isSmallScreen$ | async) ? 'SOLES' : 'CREDIT LINE'">
    <!-- 你的tab内容 -->
  </tab>
</tabset>

方案二：手动监听window.resize事件 #

如果你不想用CDK，也可以手动监听窗口大小变化，但要记得处理订阅销毁，避免内存泄漏：

组件类代码 #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'your-tab-component',
  templateUrl: './your-tab.component.html'
})
export class YourTabComponent implements OnInit, OnDestroy {
  isSmallScreen = false;
  private resizeSub: Subscription | undefined;

  ngOnInit() {
    // 初始化时先判断一次屏幕尺寸
    this.checkScreenSize();
    // 监听resize事件，加防抖避免频繁触发
    this.resizeSub = fromEvent(window, 'resize').pipe(
      debounceTime(100)
    ).subscribe(() => this.checkScreenSize());
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    this.resizeSub?.unsubscribe();
  }

  private checkScreenSize() {
    this.isSmallScreen = window.innerWidth <= 480;
  }
}

模板代码 #

<tabset>
  <tab [heading]="isSmallScreen ? 'SOLES' : 'CREDIT LINE'">
    <!-- 你的tab内容 -->
  </tab>
</tabset>

为什么你之前的写法没生效？ #

如果之前你是把三元表达式写在ng-if里，比如：

<span *ngIf="window.innerWidth > 480 ? 'CREDIT LINE' : 'SOLES'">...</span>

这肯定不行——因为ng-if需要的是布尔值来决定是否显示元素，而不是字符串。另外，直接用window.innerWidth的话，只有页面初始化时会读取一次，窗口大小变化时不会自动更新，所以文本不会切换。

用上面的两种方案，就能完美实现屏幕尺寸变化时自动切换文本的需求啦！

内容的提问来源于stack exchange，提问作者Juan Carlos Hilario Ramírez