angular - ngx-modal - Angular 2

Question

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

<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,
],

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

Answer 2

以下是你的错误

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

解决方案：替换以下代码中的行，对于 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 {}

现场演示