无法使用 Ionic 和 Angular Material 滚动

Question

我是 Ionic 的新手，正在使用带有一系列表单的 mat-vertical-stepper。我不明白为什么页面上的内容不会滚动，尽管内容已离开页面。

我试过在不同的地方使用 overflow: auto/scroll 并添加 ion-content 但 ion-content 只会导致内容消失（控制台中没有错误）。

代码被缩写以删除表格和其他无关的内容html。

<mat-card style="min-height: 100%">
    <mat-card-content>
      <app-login (action)="toggleComponents($event)" *ngIf="action === 'login'; else register"></app-login>
      <ng-template #register>
        <ion-content>
        <app-register (action)="toggleComponents($event)"></app-register>
      </ion-content>
      </ng-template>
    </mat-card-content>
</mat-card>

下面是app-register组件：

<mat-vertical-stepper linear="false" #stepper fxLayout="column">
  <mat-step>
    <ng-template matStepLabel>Form One</ng-template>
    <form>...</form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Form Two</ng-template>
    <form>...</form>
  </mat-step>
</mat-vertical-stepper>

Answer 1

我还没有测试过这个，但我有预感这是 ion-content 和 mat-card-content 的组成问题。我会让 ion-content 成为最外层的容器元素，并将 mat-card 嵌入其中。

<ion-content>
  <mat-card style="min-height: 100%">
    <mat-card-content>
      <app-login (action)="toggleComponents($event)" *ngIf="action === 'login'; else register"></app-login>
      <ng-template #register>
        <app-register (action)="toggleComponents($event)"></app-register>
      </ng-template>
    </mat-card-content>
  </mat-card>
</ion-content>

另请在此处查看 ion-content 的离子文档： https://ionicframework.com/docs/api/content 以及此处有关离子布局系统的文档： https://ionicframework.com/docs/layout/structure

无法使用 Ionic 和 Angular Material 滚动

Can't scroll using Ionic and Angular Material

angular-material

angular

ionic4