ngx-modal - Angular 2

时间:2017-03-04 22:49:01

标签: angular ngx-modal

我正在尝试在我的角度应用程序中实现模态形式。我的代码看起来没问题,因为我没有看到任何错误。我已将ngx-modal安装到我的应用程序中,并且还在ModalModule文件中导入了app.module.ts。模态形式没有响应的原因是什么?

<button class="btn btn-success"  data-toggle="modal" data-target="#myModal">Open</button>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
</div>
      </div>
    </div>
  </div>
</div>

app.module.ts

import {ModalModule} from 'ngx-modal';

imports: [          
        ModalModule,
],

2 个答案:

答案 0 :(得分:1)

你需要用

打开你的模态
<button (click)="myModal.open()">open my modal</button>
<modal #myModal>
    <modal-header>
        <h1>Modal header</h1>
    </modal-header>
    <modal-content>
        Hello Modal!
    </modal-content>
    <modal-footer>
      <button class="btn btn-primary" (click)="myModal.close()">&times;</button>
    </modal-footer>
</modal>

答案 1 :(得分:0)

以下是你的错误

  1. 您正在尝试使用类似于传统引导模式的以下行,这是错误的,因为通常使用jQuery和Bootstrap.js

    <button class="btn btn-success" data-toggle="modal" 
             data-target="#myModal">Open</button>
    
  2. 您正在使用id为模态组件定义名称,对于typescript和angular2

    ,该名称也无效
    <div class="modal fade" id="myModal" role="dialog">
    
  3. 解决方案:替换以下代码中的行,将按预期的方式运行ngx-modal。

    import {Component, NgModule} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    import {ModalModule} from "ngx-modal";
    @Component({
      selector: 'my-app',
      template: `
        <div>
          <h2>Hello {{name}}</h2>
          <div class="row">
        <button (click)="myModal.open()">open my modal</button>
        <modal #myModal>
            <modal-header>
                <h1>Modal header</h1>
            </modal-header>
            <modal-content>
                Hello Modal!
            </modal-content>
            <modal-footer>
                <button class="btn btn-primary" (click)="myModal.close()">close</button>
            </modal-footer>
        </modal>
    </div>
        </div>
      `,
    })
    export class App {
      name:string;
      constructor() {
        this.name = 'Angular2'
      }
    }
    
    @NgModule({
      imports: [ BrowserModule,ModalModule ],
      declarations: [ App ],
      bootstrap: [ App ]
    })
    export class AppModule {}
    

    <强> LIVE DEMO