Angular 2.0和模态对话框

Question

我正在尝试找到一些有关如何在Angular 2.0中执行确认模式对话框的示例。我一直在使用Angular 1.0的Bootstrap对话框，却无法在Angular 2.0的网络上找到任何示例。我还检查了Angular 2.0文档，但没有运气。

有没有办法在Angular 2.0中使用Bootstrap对话框？

Answer 1

这是一个很好的示例，说明了如何在GitHub上的Angular2应用程序中使用Bootstrap模态。要点是，您可以将bootstrap html和jquery初始化包装在组件中。我创建了一个可重用的modal组件，该组件允许您使用模板变量触发打开。<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button><modal #modal>&nbsp; &nbsp; <modal-header [show-close]="true">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="modal-title">I'm a modal!</h4>&nbsp; &nbsp; </modal-header>&nbsp; &nbsp; <modal-body>&nbsp; &nbsp; &nbsp; &nbsp; Hello World!&nbsp; &nbsp; </modal-body>&nbsp; &nbsp; <modal-footer [show-default-buttons]="true"></modal-footer></modal>您只需要安装npm软件包并在您的应用模块中注册模式模块：import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';@NgModule({&nbsp; &nbsp; imports: [Ng2Bs3ModalModule]})export class MyAppModule {}

Answer 2

这是一种简单的方法，它不依赖于jQuery或Angular 2以外的任何其他库。下面的组件（errorMessage.ts）可以用作任何其他组件的子视图。它只是始终打开或显示的引导程序模式。它的可见性由ngIf语句控制。errorMessage.tsimport { Component } from '@angular/core';@Component({&nbsp; &nbsp; selector: 'app-error-message',&nbsp; &nbsp; templateUrl: './app/common/errorMessage.html',})export class ErrorMessage{&nbsp; &nbsp; private ErrorMsg: string;&nbsp; &nbsp; public ErrorMessageIsVisible: boolean;&nbsp; &nbsp; showErrorMessage(msg: string)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; this.ErrorMsg = msg;&nbsp; &nbsp; &nbsp; &nbsp; this.ErrorMessageIsVisible = true;&nbsp; &nbsp; }&nbsp; &nbsp; hideErrorMsg()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; this.ErrorMessageIsVisible = false;&nbsp; &nbsp; }}errorMessage.html<div *ngIf="ErrorMessageIsVisible" class="modal fade show in danger" id="myModal" role="dialog">&nbsp; &nbsp; <div class="modal-dialog">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal">&times;</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4 class="modal-title">Error</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{{ErrorMsg}}</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-default" (click)="hideErrorMsg()">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>这是父控件的示例（为简洁起见，省略了一些无关的代码）：父母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({&nbsp; &nbsp; selector: 'app-application-detail',&nbsp; &nbsp; templateUrl: './app/permissions/applicationDetail.html',&nbsp; &nbsp; directives: [ROUTER_DIRECTIVES, ErrorMessage]&nbsp; // Note ErrorMessage is a directive})export class ApplicationDetail implements OnActivate{&nbsp; &nbsp; @ViewChild(ErrorMessage) errorMsg: ErrorMessage;&nbsp; // ErrorMessage is a ViewChild&nbsp; &nbsp; // yada yada&nbsp; &nbsp; onSubmit()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; let result = this.permissionsService.SaveApplication(this.Application).subscribe(x =>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.Error = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x.Message = "This is a dummy error message";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (x.Error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.errorMsg.showErrorMessage(x.Message);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.router.navigate(['/applicationsIndex']);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}parent.html<app-error-message></app-error-message>// your html...