尝试关闭时出现NgbModal错误

时间:2016-12-30 23:10:14

标签: angular bootstrap-modal ng-bootstrap

我已成功将NgbModal整合到我的Angular 2应用程序中,我目前在模态中显示了另一个组件。

我遇到的问题是,一旦它出现,我点击关闭我收到以下错误消息:

Cannot read property 'close' of undefined

现在我一直在关注Components as content我已经查看了HTML并且还浏览了Typescript,但是我不确定我在这里真正缺少的是什么。< / p>

这是我的类型脚本文件:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { BugService } from '../service/bug.service';
import { Bug } from '../model/bug';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { BugDetailComponent } from '../../bug-detail/bug-detail.component';

@Component({
   selector: 'bug-list',
   templateUrl: './bug-list.component.html',
   styleUrls: ['./bug-list.component.css']
})

export class BugListComponent implements OnInit {

  private bugs: Bug[] = [];

  constructor(private bugService: BugService, private cdRef: ChangeDetectorRef, private modalService: NgbModal) { }

  ngOnInit() {
    this.getAddedBugs();
  }

  getAddedBugs() {
    this.bugService.getAddedBugs().subscribe(bug => {
        this.bugs.push(bug);
        this.cdRef.detectChanges();
    },
        err => {
            console.error("unable to get added bug - ", err);
        });
  }

  open() {
     const modalRef = this.modalService.open(BugDetailComponent);
     modalRef.componentInstance.name = 'World';
  }
}

我导入BugDetailComponent然后我在open()函数中引用。当我看到错误消息时,当模态出现后我点击关闭。

我的HTML如下:

<div class="modal-header" [id]="modalId">
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
<h4 class="modal-title">Hi there!</h4>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
   <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>

有人可以详细说明为什么我收到此错误并可能帮我修复它?

4 个答案:

答案 0 :(得分:3)

请忽略,我解决了这个问题。在bug-detail.component.ts

之后缺少以下构造函数
constructor(public activeModal: NgbActiveModal) {}

答案 1 :(得分:1)

如果有人遇到相同的问题(我尝试过Code Ratchet的解决方案,但遇到了与Adrita Sharma相同的问题)。

const modalRef = this.modalService.open(BugDetailComponent); 

通过使用模板中的modalRef.close(),我能够使用closedismiss

示例:

<button type="button" class="btn btn-secondary" (click)="modalRef.close('Close click')">Close</button>

答案 2 :(得分:-1)

在app模块的提供者[NgbActiveModal]中添加NgbActiveModal。然后它将在你的所有组件中都可用。然后在构造函数的构造函数中声明它的变量(private ngvActiveModal:NgbActiveModal);

答案 3 :(得分:-2)

如果行

中缺少导入“NgbModal”,则可能遇到同样的错误

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';