在垂直和水平步进材料之间切换 [英] Switch between vertical and horizontal stepper material

问题描述

如何从具有相同步进器步长的角度分量在 ma​​t-vertical-stepper 和 ma​​t-h​​orizo​​ntal-stepper 之间切换?

How to switch between mat-vertical-stepper and mat-horizontal-stepper from angular component with same stepper steps?

推荐答案

为了避免重写相同的 html 内容，请这样做.创建模板并使用 #hashtag 为他们提供参考.然后你可以使用 ng-container *ngTemplateOutlet="hashtag"></ng-container> 插入它们.

to avoid rewriting identical html content, do like this. Create the template and give them a reference using a #hashtag. then you can instert them using ng-container *ngTemplateOutlet="hashtag"></ng-container>.

这是一个制作响应式 stepepr 的例子，有角度的材料方式.

here is an example of making a responsive stepepr, the angular material way.

<ng-template #stepOne>
  <div>step one</div>
</ng-template>

<ng-template #stepTwo>
  <div>step two</div>
</ng-template>

<ng-template #stepThree>
  <div>step three</div>
</ng-template>

<ng-template #stepFour>
  <div>step four</div>
</ng-template>

<ng-template [ngIf]="smallScreen" [ngIfElse]="bigScreen">
  <mat-vertical-stepper linear #stepper >
    <mat-step>
      <ng-container *ngTemplateOutlet="stepOne"></ng-container>
    </mat-step>
    <mat-step>
      <ng-container *ngTemplateOutlet="stepTwo"></ng-container>
    </mat-step>
    <mat-step>
      <ng-container *ngTemplateOutlet="stepThree"></ng-container>
    </mat-step>
    <mat-step>
      <ng-container *ngTemplateOutlet="stepFour"></ng-container>
    </mat-step>
  </mat-vertical-stepper>
</ng-template>

<ng-template #bigScreen>
  <mat-horizontal-stepper linear #stepper >
    <mat-step>
      <ng-container *ngTemplateOutlet="stepOne"></ng-container>
    </mat-step>
    <mat-step >
      <ng-container *ngTemplateOutlet="stepTwo"></ng-container>
    </mat-step>
    <mat-step>
      <ng-container *ngTemplateOutlet="stepThree"></ng-container>
    </mat-step>
    <mat-step>
      <ng-container *ngTemplateOutlet="stepFour"></ng-container>
    </mat-step>
  </mat-horizontal-stepper>
</ng-template>

您可以像这样使用 angular cdk 布局来跟踪屏幕大小.

You can use the angular cdk layout to track screen size like this.

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

@Component({
  selector: 'app-responsive-stepper',
  templateUrl: './responsive-stepper.component.html',
  styleUrls: ['./responsive-stepper.component.scss']
})
export class ResponsiveStepperComponent implements OnInit {

    smallScreen: boolean;

    constructor(
       private breakpointObserver: BreakpointObserver
      ) {
        breakpointObserver.observe([
          Breakpoints.XSmall,
          Breakpoints.Small
        ]).subscribe(result => {
          this.smallScreen = result.matches;
      });
     }
}

这篇关于在垂直和水平步进材料之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！