我正在嘗試找到一些有關(guān)如何在Angular 2.0中執(zhí)行確認(rèn)模式對話框的示例。我一直在使用Angular 1.0的Bootstrap對話框，卻無法在Angular 2.0的網(wǎng)絡(luò)上找到任何示例。我還檢查了Angular 2.0文檔，但沒有運氣。有沒有辦法在Angular 2.0中使用Bootstrap對話框？
3 回答
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗 獲得超4個贊
這是一個很好的示例，說明了如何在GitHub上的Angular2應(yīng)用程序中使用Bootstrap模態(tài)。
要點是，您可以將bootstrap html和jquery初始化包裝在組件中。我創(chuàng)建了一個可重用的modal組件，該組件允許您使用模板變量觸發(fā)打開。
<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button>
<modal #modal>
<modal-header [show-close]="true">
<h4 class="modal-title">I'm a modal!</h4>
</modal-header>
<modal-body>
Hello World!
</modal-body>
<modal-footer [show-default-buttons]="true"></modal-footer>
</modal>
您只需要安裝npm軟件包并在您的應(yīng)用模塊中注冊模式模塊：
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
@NgModule({
imports: [Ng2Bs3ModalModule]
})
export class MyAppModule {}
弒天下
TA貢獻(xiàn)1818條經(jīng)驗 獲得超8個贊
這是一種簡單的方法，它不依賴于jQuery或Angular 2以外的任何其他庫。下面的組件（errorMessage.ts）可以用作任何其他組件的子視圖。它只是始終打開或顯示的引導(dǎo)程序模式。它的可見性由ngIf語句控制。
errorMessage.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-error-message',
templateUrl: './app/common/errorMessage.html',
})
export class ErrorMessage
{
private ErrorMsg: string;
public ErrorMessageIsVisible: boolean;
showErrorMessage(msg: string)
{
this.ErrorMsg = msg;
this.ErrorMessageIsVisible = true;
}
hideErrorMsg()
{
this.ErrorMessageIsVisible = false;
}
}
errorMessage.html
<div *ngIf="ErrorMessageIsVisible" class="modal fade show in danger" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p>{{ErrorMsg}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="hideErrorMsg()">Close</button>
</div>
</div>
</div>
</div>
這是父控件的示例（為簡潔起見，省略了一些無關(guān)的代碼）：
父母
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/common';
import {Router, RouteSegment, OnActivate, ROUTER_DIRECTIVES } from '@angular/router';
import { OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-application-detail',
templateUrl: './app/permissions/applicationDetail.html',
directives: [ROUTER_DIRECTIVES, ErrorMessage] // Note ErrorMessage is a directive
})
export class ApplicationDetail implements OnActivate
{
@ViewChild(ErrorMessage) errorMsg: ErrorMessage; // ErrorMessage is a ViewChild
// yada yada
onSubmit()
{
let result = this.permissionsService.SaveApplication(this.Application).subscribe(x =>
{
x.Error = true;
x.Message = "This is a dummy error message";
if (x.Error) {
this.errorMsg.showErrorMessage(x.Message);
}
else {
this.router.navigate(['/applicationsIndex']);
}
});
}
}
parent.html
<app-error-message></app-error-message>
// your html...
- 3 回答
- 0 關(guān)注
- 623 瀏覽
添加回答
舉報
0/150
提交
取消