Angular 2

Question

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

<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 为模态组件定义名称，该名称在打字稿和 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 {}

现场演示