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>

    <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软件包并在您的应用模块中注册模式模块：

import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

@NgModule({

    imports: [Ng2Bs3ModalModule]

})

export class MyAppModule {}

Answer 2

这是一种简单的方法，它不依赖于jQuery或Angular 2以外的任何其他库。下面的组件（errorMessage.ts）可以用作任何其他组件的子视图。它只是始终打开或显示的引导程序模式。它的可见性由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">&times;</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>

这是父控件的示例（为简洁起见，省略了一些无关的代码）：

父母

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...