Angular 2.0 で確認モーダル ダイアログを実行する方法の例を探しています。Angular 1.0 では Bootstrap ダイアログを使用していますが、Web 上で Angular 2.0 の例を見つけることができません。Angular 2.0 のドキュメントも確認しましたが、見つかりません。
Angular 2.0 で Bootstrap ダイアログを使用する方法はありますか?
ベストアンサー1
- Angular 2以上
- Bootstrap CSS (アニメーションは保持されます)
- JQueryなし
- bootstrap.js なし
- サポートカスタムモーダルコンテンツ(受け入れられた回答と同様)
- 最近追加されたサポート複数のモーダルが重なり合う。
`
@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();
}
}
}
背景を表示する次のような CSS が必要になります。
.modal {
background: rgba(0,0,0,0.6);
}
この例では、複数のモーダルを同時に使用できるようになっています。(onContainerClicked()
方法を参照)。
Bootstrap 4 CSSユーザー向け、1 つの小さな変更を加える必要があります (CSS クラス名が Bootstrap 3 から更新されたため)。この行:[ngClass]="{'in': visibleAnimate}"
を次のように変更する必要があります:[ngClass]="{'show': visibleAnimate}"
例として、プランク