เชิงมุมกำหนดเองกิริยา
@ สตีเฟ่นต่อเนื่องพอล...
- Bootstrap css เชิงมุม 2 ขึ้นไป (เก็บภาพเคลื่อนไหวไว้)
- ไม่มี JQuery
- ไม่มี bootstrap.js
- รองรับเนื้อหากิริยาที่กำหนดเอง
- สนับสนุนหลาย modals ที่ด้านบนของกันและกัน
- Moduralized
- ปิดใช้งานการเลื่อนเมื่อโมดอลเปิดอยู่
- Modal จะถูกทำลายเมื่อไปทางอื่น
- การเริ่มต้นเนื้อหาขี้เกียจซึ่งได้รับ
ngOnDestroy(ed) เมื่อออกจาก modal
- การเลื่อนพาเรนต์ถูกปิดใช้งานเมื่อมองเห็นโมดอล
การเริ่มต้นเนื้อหาขี้เกียจ
ทำไม?
ในบางกรณีคุณอาจไม่ต้องการที่จะเป็นกิริยาช่วยในการรักษาสถานะของมันหลังจากที่ถูกปิด แต่กลับคืนสู่สถานะเริ่มต้น
ปัญหา modal ดั้งเดิม
การส่งเนื้อหาตรงไปตรงมาสู่มุมมองจะสร้างการเริ่มต้นจริงก่อนที่ modal จะได้รับ Modal ไม่มีวิธีฆ่าเนื้อหาดังกล่าวแม้ว่าจะใช้*ngIfwrapper
สารละลาย
ng-template. ng-templateไม่แสดงจนกว่าจะสั่งให้ทำ
-component.module.ts ของฉัน
...
imports: [
...
ModalModule
]
-component.ts ของฉัน
<button (click)="reuseModal.open()">Open</button>
<app-modal #reuseModal>
<ng-template #header></ng-template>
<ng-template #body>
<app-my-body-component>
<!-- This component will be created only when modal is visible and will be destroyed when it's not. -->
</app-my-body-content>
<ng-template #footer></ng-template>
</app-modal>
modal.component.ts
export class ModalComponent ... {
@ContentChild('header') header: TemplateRef<any>;
@ContentChild('body') body: TemplateRef<any>;
@ContentChild('footer') footer: TemplateRef<any>;
...
}
modal.component.html
<div ... *ngIf="visible">
...
<div class="modal-body">
ng-container *ngTemplateOutlet="body"></ng-container>
</div>
อ้างอิง
ฉันต้องบอกว่ามันคงเป็นไปไม่ได้หากไม่มีเอกสารที่เป็นทางการและชุมชนยอดเยี่ยมทั่วเน็ต มันอาจจะช่วยบางส่วนของคุณเกินไปที่จะทำความเข้าใจวิธีการng-template, *ngTemplateOutletและ@ContentChildการทำงาน
https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesignsystem/ng-content -the-hidden-docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-children-and-querylist-in-questlist -angular-896b0c689f6e
โซลูชั่นการคัดลอกวางแบบเต็ม
modal.component.html
<div
(click)="onContainerClicked($event)"
class="modal fade"
tabindex="-1"
[ngClass]="{'in': visibleAnimate}"
[ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}"
*ngIf="visible">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<ng-container *ngTemplateOutlet="header"></ng-container>
<button class="close" data-dismiss="modal" type="button" aria-label="Close" (click)="close()">×</button>
</div>
<div class="modal-body">
<ng-container *ngTemplateOutlet="body"></ng-container>
</div>
<div class="modal-footer">
<ng-container *ngTemplateOutlet="footer"></ng-container>
</div>
</div>
</div>
</div>
modal.component.ts
/**
* @Stephen Paul https://stackoverflow.com/a/40144809/2013580
* @zurfyx https://stackoverflow.com/a/46949848/2013580
*/
import { Component, OnDestroy, ContentChild, TemplateRef } from '@angular/core';
@Component({
selector: 'app-modal',
templateUrl: 'modal.component.html',
styleUrls: ['modal.component.scss'],
})
export class ModalComponent implements OnDestroy {
@ContentChild('header') header: TemplateRef<any>;
@ContentChild('body') body: TemplateRef<any>;
@ContentChild('footer') footer: TemplateRef<any>;
public visible = false;
public visibleAnimate = false;
ngOnDestroy() {
// Prevent modal from not executing its closing actions if the user navigated away (for example,
// through a link).
this.close();
}
open(): void {
document.body.style.overflow = 'hidden';
this.visible = true;
setTimeout(() => this.visibleAnimate = true, 200);
}
close(): void {
document.body.style.overflow = 'auto';
this.visibleAnimate = false;
setTimeout(() => this.visible = false, 100);
}
onContainerClicked(event: MouseEvent): void {
if ((<HTMLElement>event.target).classList.contains('modal')) {
this.close();
}
}
}
modal.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ModalComponent } from './modal.component';
@NgModule({
imports: [
CommonModule,
],
exports: [ModalComponent],
declarations: [ModalComponent],
providers: [],
})
export class ModalModule { }
