কৌণিক-অর্ডারি মোডাল
@ স্টিফেন পল ধারাবাহিকতা ...
- কৌণিক 2 এবং আপ বুটস্ট্র্যাপ CSS (অ্যানিমেশন সংরক্ষণ করা হয়)
- কোন জিকুয়েরি নেই
- কোনও বুটস্ট্র্যাপ.জেএস নেই
- কাস্টম মডেল সামগ্রী সমর্থন করে
- একে অপরের উপরে একাধিক মডেলের জন্য সমর্থন।
- 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://medium.com/claritydesigns system/ 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 { }