Javascript 在角度2上使用模态（Ng2Bs3Modal）

我在Angular 2应用程序中输入模态时遇到一些问题

我使用的是

Ng-2Bs3-Modal

插件，到目前为止，我已经完成了它在他们网站上所说的一切，但是当我点击应该激活Modal的按钮时，什么也没有发生

下面是代码的样子：

在

app.module.ts

上：

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

在

index.html

中，我链接了

jquery

、

bootstrap

和模式本身：

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

还有来自

systemjs.config.js

的代码：

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

我没有得到任何错误，唯一的问题是模态没有打开

---

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

如果您已经通过index.html导入了它，为什么还要通过SystemJS再次导入它？我刚才提出了一个问题，但这段代码实际上是注释代码看起来与教程相同。奇怪的是，如果你没有得到任何JS错误，还有其他错误吗？比如网络？或者尝试重新编译代码？我没有收到任何错误：（，这真的很奇怪。你知道有其他插件很容易使用吗？或者你已经使用过了吗？如果你已经通过index.html导入了它，为什么还要通过SystemJS再次导入呢？我刚才提出了一个问题，但这段代码实际上是注释代码。代码看起来和教程一样。奇怪的是，如果你没有得到任何JS错误，是否还有其他错误？比如网络？或者试着重新编译代码？我没有得到任何错误：（，这真的很奇怪。你知道其他容易使用或已经使用过的插件吗？

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();
  }
}

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