检测离子/角模态尺寸（断点）变化？

Question

我有一个 Ionic 6 / Angular 13 项目，我正在使用一些模态。我的模态有多个断点，它们包含一张带有标题和内容的卡片以及两个按钮。我希望这些按钮在任何断点处都可见，但始终位于页面视图的底部。

模态配置：

const modal = await this.modalController.create({
  component: MyComponent,
  backdropBreakpoint: 0.1,
  initialBreakpoint: 0.5,
  breakpoints: [smallestBreakPoint, 0.5, 0.9]
})

MyComponent

模板：

<ion-card style="background-color: white; height: 90%;">
  <ion-card-header class="pb-0 pt-2">
    <ion-card-title>
      ...
    </ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <ion-item lines="none">
      ...
    </ion-item>
    <ion-item lines="none" (click)="..." button>
      ...
    </ion-item>
    <ion-row>
      <ion-col class="text-center">
        <ion-button expand="block" class="custom-button" color="light">
          ...
        </ion-button>
      </ion-col>
      <ion-col class="text-center" size="8">
        <ion-button expand="block" class="custom-button" (click)="...">
          ...
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-card-content>
</ion-card>

我尝试更改

<ion-row>

和

<ion-card>

的位置和偏移量，但没有一个成功。我也尝试过

<ion-footer>

。请注意，卡片 div 比应有的要大，因为它应该在 0.9 断点处完全打开。

预期输出：

我该怎么做？

提前致谢！

Answer 1

好的，试试这个片段，它对我来说效果很好：

<ion-modal
#modal
trigger="open-modal"
(willDismiss)="onWillDismiss($event)"
[initialBreakpoint]="0.5"
[breakpoints]="[0, 1]"
handleBehavior="cycle"
id="open-modal"
>
<ng-template class="block">
  <ion-header>
    <ion-toolbar>
      <ion-buttons>
        ...
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-card style="background-color: white;">
<ion-card-header class="pb-0 pt-2">
<ion-card-title>
  ...
</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item lines="none">
  ...
</ion-item>
<ion-item lines="none" (click)="..." button>
  ...
</ion-item>
<ion-row>
  <ion-col class="text-center">
    <ion-button expand="block" class="custom-button" color="light">
      ...
    </ion-button>
  </ion-col>
  <ion-col class="text-center" size="8">
    <ion-button expand="block" class="custom-button" (click)="...">
      ...
    </ion-button>
  </ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-content>
</ng-template>
</ion-modal>

并且 TS 文件应该导入：

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule, DatePipe } from '@angular/common';
import { IonModal } from '@ionic/angular';

如果您愿意，这些是一些有用的功能：

//inside your class
@ViewChild(IonModal)
modal!: IonModal;
cancel() {
this.modal.dismiss();
}

async openModal() {
return await this.modal.present();
}