blocks|key|4444429|text|这里有一个非常不错的示例，展示了如何在GitHub上的Angular2应用程序中使用Bootstrap模式。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4444430|它的要点是您可以将bootstrap、html和jquery初始化包装在一个组件中。我已经创建了一个可重用的modal组件，它允许您使用模板变量触发open。|style|CODE|4444431|<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>|code-block|syntax|javascript|4444432|你只需要安装npm包，并在你的app模块中注册module模块：|4444433|import+{+Ng2Bs3ModalModule+}+from+'ng2-bs3-modal/ng2-bs3-modal';

@NgModule({
++++imports:+[Ng2Bs3ModalModule]
})
export+class+MyAppModule+{}|4444434|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/dougludlow/ng2-bs3-modal^0|J|6|0|0|1I|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>Here's a pretty decent example of how you can use the Bootstrap modal within an Angular2 app on <a href="https://github.com/dougludlow/ng2-bs3-modal" rel="noreferrer">GitHub</a>.</p>

<p>The gist of it is that you can wrap the bootstrap html and jquery initialization in a component. I've created a reusable <code>modal</code> component that allows you to trigger an open using a template variable.</p>

<pre><code>&lt;button type="button" class="btn btn-default" (click)="modal.open()"&gt;Open me!&lt;/button&gt;

&lt;modal #modal&gt;
    &lt;modal-header [show-close]="true"&gt;
        &lt;h4 class="modal-title"&gt;I'm a modal!&lt;/h4&gt;
    &lt;/modal-header&gt;
    &lt;modal-body&gt;
        Hello World!
    &lt;/modal-body&gt;
    &lt;modal-footer [show-default-buttons]="true"&gt;&lt;/modal-footer&gt;
&lt;/modal&gt;
</code></pre>

<p>You just need to install the npm package and register the modal module in your app module:</p>

<pre><code>import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';

@NgModule({
    imports: [Ng2Bs3ModalModule]
})
export class MyAppModule {}
</code></pre>


blocks|key|4444474|text|这是一种简单的方法，它不依赖于jquery或除Angular+2之外的任何其他库。下面的组件(errorMessage.ts)可以用作任何其他组件的子视图。它只是一个总是打开或显示的引导模式。它的可见性由ngIf语句控制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4444475|errorMessage.ts|4444476|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;
++++}
}|code-block|syntax|javascript|4444477|errorMessage.html|4444478|<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>|4444479|这是一个父控件示例(为简洁起见，省略了一些不相关的代码)：|4444480|parent.ts|4444481|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']);
++++++++++++}
++++++++});
++++}

}|4444482|parent.html|4444483|<app-error-message></app-error-message>
//+your+html...|4444484|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>This is a simple approach that does not depend on jquery or any other library except Angular 2.
The component below (errorMessage.ts) can be used as a child view of any other component.  It is simply a bootstrap modal that is always open or shown.  It's visibility is governed by the ngIf statement.</p>

<p>errorMessage.ts</p>

<pre><code>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;
    }
}
</code></pre>

<p>errorMessage.html</p>

<pre><code>&lt;div *ngIf="ErrorMessageIsVisible" class="modal fade show in danger" id="myModal" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;

        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                &lt;h4 class="modal-title"&gt;Error&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
                &lt;p&gt;{{ErrorMsg}}&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-default" (click)="hideErrorMsg()"&gt;Close&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This is an example parent control (some non-relevant code has been omitted for brevity):</p>

<p>parent.ts</p>

<pre><code>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 =&gt;
        {
            x.Error = true;
            x.Message = "This is a dummy error message";

            if (x.Error) {
                this.errorMsg.showErrorMessage(x.Message);
            }
            else {
                this.router.navigate(['/applicationsIndex']);
            }
        });
    }

}
</code></pre>

<p>parent.html</p>

<pre><code>&lt;app-error-message&gt;&lt;/app-error-message&gt;
// your html...
</code></pre>


blocks|key|4444231|text|下面是我的模式引导angular2组件的完整实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4444232|我假设在您的主index.html文件(带有<html>和<body>标记)中，<body>标记的底部有：|offset|length|style|CODE|4444233|++<script+src="assets/js/jquery-2.1.1.js"></script>
++<script+src="assets/js/bootstrap.min.js"></script>|code-block|syntax|javascript|4444234|modal.component.ts：|4444235|import+{+Component,+Input,+Output,+ElementRef,+EventEmitter,+AfterViewInit+}+from+'@angular/core';

declare+var+$:+any;//+this+is+very+importnant+(to+work+this+line:+this.modalEl.modal('show'))+-+don't+do+this+(becouse+this+owerride+jQuery+which+was+changed+by+bootstrap,+included+in+main+html-body+template):+let+$+=+require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
++selector:+'modal',
++templateUrl:+'./modal.html',
})
export+class+Modal+implements+AfterViewInit+{

++++@Input()+title:string;
++++@Input()+showClose:boolean+=+true;
++++@Output()+onClose:+EventEmitter<any>+=+new+EventEmitter();

++++modalEl+=+null;
++++id:+string+=+uniqueId('modal_');

++++constructor(private+_rootNode:+ElementRef)+{}

++++open()+{
++++++++this.modalEl.modal('show');
++++}

++++close()+{
++++++++this.modalEl.modal('hide');
++++}

++++closeInternal()+{+//+close+modal+when+click+on+times+button+in+up-right+corner
++++++++this.onClose.next(null);+//+emit+event
++++++++this.close();
++++}

++++ngAfterViewInit()+{
++++++++this.modalEl+=+$(this._rootNode.nativeElement).find('div.modal');
++++}

++++has(selector)+{
++++++++return+$(this._rootNode.nativeElement).find(selector).length;
++++}
}

let+modal_id:+number+=+0;
export+function+uniqueId(prefix:+string):+string+{
++++return+prefix+%2B+%2B%2Bmodal_id;
}|4444236|modal.html：|4444237|<div+class="modal+inmodal+fade"+id="{{modal_id}}"+tabindex="-1"+role="dialog"++aria-hidden="true"+#thisModal>
++++<div+class="modal-dialog">
++++++++<div+class="modal-content">
++++++++++++<div+class="modal-header"+[ngClass]="{'hide':+!(has('mhead')+%7C%7C+title)+}">
++++++++++++++++<button+*ngIf="showClose"+type="button"+class="close"+(click)="closeInternal()"><span+aria-hidden="true">&times;</span><span+class="sr-only">Close</span></button>
++++++++++++++++<ng-content+select="mhead"></ng-content>
++++++++++++++++<h4+*ngIf='title'+class="modal-title">{{+title+}}</h4>
++++++++++++</div>
++++++++++++<div+class="modal-body">
++++++++++++++++<ng-content></ng-content>
++++++++++++</div>

++++++++++++<div+class="modal-footer"+[ngClass]="{'hide':+!has('mfoot')+}"+>
++++++++++++++++<ng-content+select="mfoot"></ng-content>
++++++++++++</div>
++++++++</div>
++++</div>
</div>|4444238|客户端编辑器组件中的用法示例:+client-edit-component.ts：|4444239|import+{+Component+}+from+'@angular/core';
import+{+ClientService+}+from+'./client.service';
import+{+Modal+}+from+'../common';

@Component({
++selector:+'client-edit',
++directives:+[+Modal+],
++templateUrl:+'./client-edit.html',
++providers:+[+ClientService+]
})
export+class+ClientEdit+{

++++_modal+=+null;

++++constructor(private+_ClientService:+ClientService)+{}

++++bindModal(modal)+{this._modal=modal;}

++++open(client)+{
++++++++this._modal.open();
++++++++console.log({client});
++++}

++++close()+{
++++++++this._modal.close();
++++}

}|4444240|client-edit.html：|4444241|<modal+[title]='"Some+standard+title"'+[showClose]='true'+(onClose)="close()"+#editModal>{{+bindModal(editModal)+}}
++++<mhead>Som+non-standart+title</mhead>
++++Some+contents
++++<mfoot><button+calss='btn'+(click)="close()">Close</button></mfoot>
</modal>|4444242|当然，title、showClose、<mhead>和<mfoot>都是可选的参数/标记。|4444243|entityMap^0|0|M|6|T|6|14|6|0|0|0|0|0|0|0|0|0|0|3|5|9|9|J|7|R|7|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]|$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1J|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|1K|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$]]|$1|10|3|11|5|J|7|1M|8|@]|9|@]|A|$K|L]]|$1|12|3|13|5|6|7|1N|8|@$D|1O|E|1P|F|G]|$D|1Q|E|1R|F|G]|$D|1S|E|1T|F|G]|$D|1U|E|1V|F|G]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|15|$]]

<p>Here is my full implementation of modal bootstrap angular2 component:</p>

<p>I assume that in your main index.html file (with <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> tags) at the bottom of <code>&lt;body&gt;</code> tag you have:</p>

<pre><code>  &lt;script src="assets/js/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>modal.component.ts:</p>

<pre><code>import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core';

declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
  selector: 'modal',
  templateUrl: './modal.html',
})
export class Modal implements AfterViewInit {

    @Input() title:string;
    @Input() showClose:boolean = true;
    @Output() onClose: EventEmitter&lt;any&gt; = new EventEmitter();

    modalEl = null;
    id: string = uniqueId('modal_');

    constructor(private _rootNode: ElementRef) {}

    open() {
        this.modalEl.modal('show');
    }

    close() {
        this.modalEl.modal('hide');
    }

    closeInternal() { // close modal when click on times button in up-right corner
        this.onClose.next(null); // emit event
        this.close();
    }

    ngAfterViewInit() {
        this.modalEl = $(this._rootNode.nativeElement).find('div.modal');
    }

    has(selector) {
        return $(this._rootNode.nativeElement).find(selector).length;
    }
}

let modal_id: number = 0;
export function uniqueId(prefix: string): string {
    return prefix + ++modal_id;
}
</code></pre>

<p>modal.html:</p>

<pre><code>&lt;div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog"  aria-hidden="true" #thisModal&gt;
    &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header" [ngClass]="{'hide': !(has('mhead') || title) }"&gt;
                &lt;button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                &lt;ng-content select="mhead"&gt;&lt;/ng-content&gt;
                &lt;h4 *ngIf='title' class="modal-title"&gt;{{ title }}&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
                &lt;ng-content&gt;&lt;/ng-content&gt;
            &lt;/div&gt;

            &lt;div class="modal-footer" [ngClass]="{'hide': !has('mfoot') }" &gt;
                &lt;ng-content select="mfoot"&gt;&lt;/ng-content&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And example of usage in client Editor component:
client-edit-component.ts:</p>

<pre><code>import { Component } from '@angular/core';
import { ClientService } from './client.service';
import { Modal } from '../common';

@Component({
  selector: 'client-edit',
  directives: [ Modal ],
  templateUrl: './client-edit.html',
  providers: [ ClientService ]
})
export class ClientEdit {

    _modal = null;

    constructor(private _ClientService: ClientService) {}

    bindModal(modal) {this._modal=modal;}

    open(client) {
        this._modal.open();
        console.log({client});
    }

    close() {
        this._modal.close();
    }

}
</code></pre>

<p>client-edit.html:</p>

<pre><code>&lt;modal [title]='"Some standard title"' [showClose]='true' (onClose)="close()" #editModal&gt;{{ bindModal(editModal) }}
    &lt;mhead&gt;Som non-standart title&lt;/mhead&gt;
    Some contents
    &lt;mfoot&gt;&lt;button calss='btn' (click)="close()"&gt;Close&lt;/button&gt;&lt;/mfoot&gt;
&lt;/modal&gt;
</code></pre>

<p>Ofcourse <code>title</code>, <code>showClose</code>, <code>&lt;mhead&gt;</code> and <code>&lt;mfoot&gt;</code> ar optional parameters/tags.</p>


blocks|key|4444581|text|检查在运行时创建的ASUI对话框。不需要隐藏和显示逻辑。简单的服务将在运行时使用AOT+ASUI+NPM创建一个组件|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4444582|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/asui^0|18|8|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Check ASUI dialog which create at runtime. There is no need of hide and show logic. Simply service will create a component at runtime using AOT
<a href="https://www.npmjs.com/package/asui" rel="nofollow noreferrer">ASUI NPM</a> </p>


<p>I am trying to find some examples on how to do a Confirmation modal dialog in Angular 2.0. I have been using Bootstrap dialog for Angular 1.0  and unable to find any examples in the web for Angular 2.0. I also checked angular 2.0 docs with no luck.</p>

<p>Is there a way to use the Bootstrap dialog with Angular 2.0?</p>


Angular 2.0 and Modal Dialog

jQuery

我正在尝试寻找一些关于如何在Angular 2.0中创建确认模式对话框的示例。我一直在使用用于Angular 1.0的Bootstrap对话框，但在网上找不到任何用于Angular 2.0的示例。我还查看了angular 2.0文档，但没有成功。有没有办法在Angular 2.0中使用Bootstrap对话框？

问Angular 2.0和Modal对话框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 2.0和Modal对话框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular 2.0和Modal对话框
EN