각도 맞춤 모달
@Stephen Paul 계속 ...
- 각도 2 및 부트 스트랩 CSS (애니메이션은 유지됨)
- 아니 JQuery
- bootstrap.js 없음
- 커스텀 모달 컨텐츠 지원
- 서로의 여러 모달을 지원합니다.
- 모듈화
- 모달이 열려있을 때 스크롤 비활성화
- 탐색하면 모달이 파괴됩니다.
- 게으른 콘텐츠 초기화
ngOnDestroy. 모달이 종료되면 가져 옵니다.
- 모달이 표시되면 부모 스크롤이 비활성화됩니다.
게으른 콘텐츠 초기화
왜?
어떤 경우에는 닫은 후에 상태를 유지하기 위해 모달을 원하지 않고 오히려 초기 상태로 복원 할 수 있습니다.
원래 모달 문제
내용을 뷰로 직접 전달하면 실제로 모달이 가져 오기 전에도 내용을 초기화합니다. 모달에는 *ngIf래퍼를 사용하더라도 이러한 내용을 죽일 수있는 방법이 없습니다 .
해결책
ng-template. ng-template그렇게 명령하기 전까지는 렌더링되지 않습니다.
my-component.module.ts
...
imports: [
...
ModalModule
]
my-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 각도 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 { }
