我试图找到一些关于如何在Angular 2.0中进行确认模式对话框的示例.我一直在为Angular 1.0使用Bootstrap dialog,但在web上找不到Angular 2.0的任何示例.我还判断了angular 2.0文档,但运气不佳.
有没有办法在ANGLING 2.0中使用Bootstrap对话框?
我试图找到一些关于如何在Angular 2.0中进行确认模式对话框的示例.我一直在为Angular 1.0使用Bootstrap dialog,但在web上找不到Angular 2.0的任何示例.我还判断了angular 2.0文档,但运气不佳.
有没有办法在ANGLING 2.0中使用Bootstrap对话框?
`
@Component({
selector: 'app-component',
template: `
<button type="button" (click)="modal.show()">test</button>
<app-modal #modal>
<div class="app-modal-header">
header
</div>
<div class="app-modal-body">
Whatever content you like, form fields, anything
</div>
<div class="app-modal-footer">
<button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</app-modal>
`
})
export class AppComponent {
}
@Component({
selector: 'app-modal',
template: `
<div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
[ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<ng-content select=".app-modal-header"></ng-content>
</div>
<div class="modal-body">
<ng-content select=".app-modal-body"></ng-content>
</div>
<div class="modal-footer">
<ng-content select=".app-modal-footer"></ng-content>
</div>
</div>
</div>
</div>
`
})
export class ModalComponent {
public visible = false;
public visibleAnimate = false;
public show(): void {
this.visible = true;
setTimeout(() => this.visibleAnimate = true, 100);
}
public hide(): void {
this.visibleAnimate = false;
setTimeout(() => this.visible = false, 300);
}
public onContainerClicked(event: MouseEvent): void {
if ((<HTMLElement>event.target).classList.contains('modal')) {
this.hide();
}
}
}
To show the backdrop,您将需要类似这样的CSS:
.modal {
background: rgba(0,0,0,0.6);
}
The example now allows for multiple modals at the same time.(参见onContainerClicked()
法).
For Bootstrap 4 css users,您需要做1个小更改(因为CSS类名是从Bootstrap 3更新的).这一行:
[ngClass]="{'in': visibleAnimate}"
应更改为:
[ngClass]="{'show': visibleAnimate}"
为了演示,这里有一个100