角2.0​​和模态对话框 [英] Angular 2.0 and Modal Dialog

查看:403
本文介绍了角2.0​​和模态对话框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图找到如何在角2.0做了确认模式对话框的一些例子。我一直在使用引导对话框角1.0和无法找到网页为2.0角的例子。我还检查角2.0文档,没有运气。

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.

有没有使用带角2.0引导对话的方式?

Is there a way to use Bootstrap dialog with Angular 2.0 ?

谢谢!

推荐答案

下面是一个如何您可以将Angular2应用中使用的引导模式的一个pretty像样的例子:<一href=\"https://github.com/dougludlow/ng2-bs3-modal\">https://github.com/dougludlow/ng2-bs3-modal

Here's a pretty decent example of how you can use the Bootstrap modal within an Angular2 app: https://github.com/dougludlow/ng2-bs3-modal

它的要点是,你可以换一个部件引导HTML和jQuery的初始化。我创建了一个可重复使用的<​​code>模式组件,它允许你使用模板变量来触发一个开放的。

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

<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包,并在注册指令的组件的列表中的模态指令:

You just need to install the npm package and register the modal directives in your component's list of directives:

import { MODAL_DIRECTIVES } from 'ng2-bs3-modal';

@Component({
    directives: [MODAL_DIRECTIVES]
})
...

这篇关于角2.0​​和模态对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆