我正在尝试在我的角度应用程序中实现模态形式。我的代码看起来没问题,因为我没有看到任何错误。我已将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">×</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
import {ModalModule} from 'ngx-modal';
imports: [
ModalModule,
],
答案 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()">×</button>
</modal-footer>
</modal>
答案 1 :(得分:0)
以下是你的错误
您正在尝试使用类似于传统引导模式的以下行,这是错误的,因为通常使用jQuery和Bootstrap.js
<button class="btn btn-success" data-toggle="modal"
data-target="#myModal">Open</button>
您正在使用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 {}
<强> LIVE DEMO 强>