如何使离子模态中的页脚具有粘性?即使它处于模态中，它也应该粘在屏幕底部

Question

测试模态有页脚。我希望这个页脚能粘在屏幕的底部，即使它是模态的——它本身。它也是有条件的，当用户点击一个项目时，页脚中的按钮就会出现，但只有当模态一直向上拉时才可见，它应该粘在屏幕底部(见图(

页脚在底部的模式和粘性，但不粘到屏幕本身

理想情况下，页脚应在选择项目后显示，但仅在离子模式处于断点=1 时显示

<ion-modal class="sheet-modal"
[isOpen]="true"
[breakpoints]="[0.2, 0.4, 1]"
[initialBreakpoint]="0.3"
[backdropBreakpoint]="0.6"
[backdropDismiss]="false"
>
<ng-template >
<ion-header>
<ion-toolbar>
<ion-title>{{value}}</ion-title>
<ion-buttons slot="end">
<ion-button *ngIf="false" (click)="collapseSheetModal()">
<ion-icon color="secondary" name="caret-down"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item *ngFor="let facility of facilitys; let i = index">
<ion-label>{{facility.name}}</ion-label>
<ion-checkbox (ionChange)="zoomToFacility($event.detail,facility)"  [(ngModel)]="facility.isChecked" [value]="facility" [name]="facility.name" color="secondary" ></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>
<ion-footer class="footer">
<ion-toolbar *ngIf="selected">
<ion-button >
View units in {{selected.name}}
</ion-button>
</ion-toolbar>
</ion-footer>
</ng-template>
</ion-modal>

理想情况下，它应该是这样的：无论模式断点如何，页脚都会粘在屏幕底部

也可以这么说

Answer 1

没有内置的方法，但我能够通过指令实现所需的结果

import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import {
ChangeDetectionStrategy,
Component,
Directive,
Input,
OnInit,
TemplateRef,
inject,
DestroyRef
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { IonModal } from '@ionic/angular';
import { CommonModule } from '@angular/common';
@Directive({
selector: 'ion-modal[appIonModalOverlay]',
standalone: true,
})
export class CosIonModalOverlayDirective implements OnInit {
@Input({alias: 'cosIonModalOverlay', required: true}) overlayTemplate!: TemplateRef<unknown>;
private overlayRef?: OverlayRef;
private readonly _ionModal = inject(IonModal);
private readonly _overlay = inject(Overlay);
private readonly _destroyRef = inject(DestroyRef);
ngOnInit() {
this._ionModal.ionModalWillPresent
.pipe(takeUntilDestroyed(this._destroyRef))
.subscribe(() => {
this.open();
});
this._ionModal.ionModalWillDismiss
.pipe(takeUntilDestroyed(this._destroyRef))
.subscribe(() => {
this.overlayRef?.dispose();
this.overlayRef = undefined;
});
}
private open() {
if (this.overlayRef) {
if (ngDevMode) {
throw new Error('OverlayRef already exists');
}
return;
}
this.overlayRef = this._overlay.create({
positionStrategy: this._overlay
.position()
.global()
.centerHorizontally()
.bottom('0'),
});
const componentPortal = new ComponentPortal(ModalControlsContainerComponent);
const ref = this.overlayRef.attach(componentPortal);
ref.instance.template = this.overlayTemplate;
}
}
@Component({
selector: 'app-ion-modal-controls-container',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<ng-container *ngTemplateOutlet="template"/>`,
imports: [CommonModule],
standalone: true
})
export class ModalControlsContainerComponent {
@Input() template!: TemplateRef<unknown>;
}

的使用非常简单

<ng-template #modalFooterControls>
This will be rendered as a footer of the modal. Styles from the host component will also be applied
</ng-template>
<ion-modal [appIonModalOverlay]="modalFooterControls"...>
... 
</ion-modal>