你可以尝试这样的事情,创建myModal.html
:
<div class="modal-backdrop fade in" [style.display]="showModal ? 'block' : 'none'"></div>
<div class="modal" tabindex="-1" role="dialog" style="display: block" [style.display]="showModal ? 'block' : 'none'">
<div class="modal-dialog">
<div class="modal-popup">
<div class="popup-title">
<span>{{title}} </span>
<i class="icon-cancel fr" data-dismiss="modal" aria-label="Close" (click)="cancelAction()"></i>
<p *ngIf="subTitle">{{subTitle}}</p>
</div>
<ng-content></ng-content>
</div>
</div>
</div>
然后,创建myModal.component.ts
:
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
const template: string = require('./myModal.html');
@Component({
selector: 'modal',
template
})
export class Modal implements OnInit {
@Input('show-modal') showModal: boolean;
@Input('title') title: string;
@Input('sub-title') subTitle: string;
@Input('cancel-label') cancelLabel: string;
@Input('positive-label') positiveLabel: string;
@Output('closed') closeEmitter: EventEmitter < ModalResult > = new EventEmitter < ModalResult > ();
@Output('loaded') loadedEmitter: EventEmitter < Modal > = new EventEmitter < Modal > ();
@Output() positiveLabelAction = new EventEmitter();
constructor() {}
ngOnInit() {
this.loadedEmitter.next(this);
}
show() {
this.showModal = true;
}
hide() {
this.showModal = false;
this.closeEmitter.next({
action: ModalAction.POSITIVE
});
}
positiveAction() {
this.positiveLabelAction.next(this);
return false;
}
cancelAction() {
this.showModal = false;
this.closeEmitter.next({
action: ModalAction.CANCEL
});
return false;
}
}
export enum ModalAction { POSITIVE, CANCEL }
export interface ModalResult {
action: ModalAction;
}
然后创建module为此,您可以在任何地方使用并在任何地方使用它,如下所示:
<modal #deleteUserModal id="deleteUser"
[show-modal]="isModalOpen"
[title]="'Delete'"
>
<div class="popup-content">
<p>Are you sure you want to delete the user permanently?</p>
</div>
<div class="popup-footer">
<button class="btn cancel" aria-label="Close" (click)="deleteUserModal.hide()">
Cancel
</button>
<button type="button" class="btn btn-primary" (click)="deleteSelectedUser(deleteUserModal)" aria-label="Close">
Delete
</button>
</div>
</modal>
您也可以增强这一点:)