如何在较小的屏幕上有条件地显示角制表符？

Question

我想把内容放在标签里，但只放在较小的屏幕上。否则，内容应该退回到div块(或css中定义的其他布局)。对于较小的屏幕(@仅媒体屏幕和(max-width:600px) )，应出现选项卡

<mat-tab-group >
  <mat-tab label="First"><div> Content 1 </div></mat-tab>
  <mat-tab label="Second"><div> Content 2 </div></mat-tab>
  <mat-tab label="Third"><div> Content 3</div> </mat-tab>
</mat-tab-group>

现在，对于更大的屏幕，它必须回退到三个div块

<div> Content 1 </div>
<div> Content 2 </div>
<div> Content 3</div> 

如何使用angular / angular材质选项卡中的单个代码块来实现此目的？

Answer 1

您应该能够使用CDK Layout BreakpointObserver并将内容分解为单独的组件来完成此操作。例如：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(
    private breakpointObserver: BreakpointObserver,
  ) { }

}

<ng-container *ngIf="(isHandset$ | async) === true; then thenTemplate; else elseTemplate"></ng-container>

<ng-template #thenTemplate>
    <mat-tab-group>
      <mat-tab label="First"><div> <app-content-1></app-content-1> </div></mat-tab>
      <mat-tab label="Second"><div> <app-content-2></app-content-2> </div></mat-tab>
      <mat-tab label="Third"><div <app-content-3></app-content-3> </div> </mat-tab>
    </mat-tab-group>
</ng-template>

<ng-template #elseTemplate>
    <div>
      <div> <app-content-1></app-content-1> </div>
      <div> <app-content-2></app-content-2> </div>
      <div> <app-content-3></app-content-3> </div> 
    </div>
</ng-template>

请注意，每一段内容都需要抽象到它自己的子组件中。一些我认为可能有用的信息，你可以在this link上找到每个断点的确切尺寸和它的名称。

编辑:翻转的ng-if