Question

我在尝试在Angular 2应用程序上输入模态时遇到了一些问题。

我正在使用Ng-2Bs3-Modal插件，到目前为止，我已经完成了在walkthrough上所做的一切，但是当我点击应该激活模式的按钮时，没有任何反应。

以下是代码的样子：

在app.module.ts：

import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
@NgModule({
  imports: [Ng2Bs3ModalModule],
})

index.html我将jquery，bootstrap和模态本身联系起来{/ 1}}：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

这是来自组件的html：

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

以及此html中的ts文件：

import { Component, OnInit, ViewChild } from '@angular/core';
import {FiltroDisputaService} from '../services/filtro-disputa.service'
import {DisputaService} from '../../disputas/disputas/services/disputas.service'
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
@Component({
  moduleId: module.id,
  selector: 'filtro-disputa',
  templateUrl: `filtro-disputa.component.html`,
  providers: [FiltroDisputaService]
})

export class FiltroDisputaComponent {
  campanhas:FiltroDisputaComponent[] = []
  disputas:any;
  loading = false;
  @ViewChild('modal')
  modal: ModalComponent;
  constructor(private service: FiltroDisputaService, private disputa_service: DisputaService){}
  ngOnInit() {
    this.loading = true;
    this.service
      .lista()
      .subscribe(campanhas => {
        this.campanhas = campanhas;
        console.log("campanhas", this.campanhas)
        this.loading = false;
      }, erro => {
        console.log("erro")
        this.loading = false;
      })
  }

  open(){
    console.log("test");
    this.modal.open();
  }
}

还有来自systemjs.config.js的代码：

  System.config({
    defaultJSExtensions: true,
    map: {
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    },

我没有收到任何错误，唯一的问题是该模式不会打开。

我对其他插件的建议持开放态度，但我已经尝试了一些并且总是遇到一些问题。

在Angular 2上使用Modal（Ng2Bs3Modal）

0 个答案: