कोणीय कस्टम मॉडल
@ स्टीफन पॉल निरंतरता ...
- कोणीय 2 और बूटस्ट्रैप सीएसएस (एनीमेशन संरक्षित है)
- सं JQuery
- सं बूटस्ट्रैप। Js
- कस्टम मोडल सामग्री का समर्थन करता है
- एक दूसरे के ऊपर कई मोडल के लिए सपोर्ट।
- Moduralized
- मोडल के खुलने पर स्क्रॉल को अक्षम करें
- दूर नेविगेट करने पर मोडल नष्ट हो जाता है।
- आलसी सामग्री आरंभीकरण, जो
ngOnDestroyमोडल से बाहर होने पर (एड) हो जाता है।
- मोडल दिखाई देने पर पैरेंट स्क्रॉलिंग अक्षम हो जाती है
आलसी सामग्री आरंभीकरण
क्यों?
कुछ मामलों में आप बंद होने के बाद अपनी स्थिति को बनाए रखने के लिए मोडल नहीं करना चाहते हैं, बल्कि प्रारंभिक अवस्था में बहाल कर सकते हैं।
मूल मोडल मुद्दा
सामग्री को सीधे दृश्य में पास करना वास्तव में इसे उत्पन्न करता है इससे पहले कि मोडल प्राप्त होने से पहले ही इसे आरंभ कर देता है। मोडल में *ngIfरैपर का उपयोग करने पर भी ऐसी सामग्री को मारने का कोई तरीका नहीं है ।
उपाय
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://medlog.com/claritydesignsystem/ng-content -इस-छुपा-डॉक्स-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in -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 { }
