Angular2 ng-bootstrap 组件中的模态关闭答案

【问题标题】：Angular2 ng-bootstrap Modal close in componentAngular2 ng-bootstrap 组件中的模态关闭
【发布时间】：2017-05-08 13:28:56
【问题描述】：

当输入正常时，我将通过保存关闭组件中的引导模式。我正在使用角度 v2.4.1 和 ng-bootstrap 1.0.0-alpha.19

我尝试了this 解决方案，但出现以下错误：

没有 ViewContainerRef 的提供者

我尝试将 ViewContainerRef 添加到我的 module.ts 中，但出现以下错误：

类型“typeof ViewContainerRef”不可分配给类型“Provider”

这里是我组件中的代码：

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: '[add-name]',
    templateUrl: '../add-name.html'
})

export class MyComponent {   
   public errorMessage: string = '';

   constructor(public modalActive: NgbActiveModal) {}

   public saveNewStuff(name: string) {
        this.errorMessage = '';

        if (name === '' || name === undefined) {
            this.errorMessage = 'some message';
        } else if (this.errorMessage === '') {
            this.modalActive.close();
        }
    }
}

我也试过像NgbModalRef一样使用

  constructor(public modalRef: NgbModalRef) {}

 public closeModal() {
    this.modalRef.close();
    this.modalRef.dismiss();
}

但这根本不起作用。我什至没有收到错误消息。

【问题讨论】：

您是否在您的 ngModule 中添加了 NgbModule？
是的，我在 @NgModule() 的导入中添加了“NgbModule.forRoot()”

标签： angular modal-dialog ng-bootstrap

【解决方案1】：

您必须保存对 openend 模态窗口的引用，以便稍后关闭它：

public mr: NgbModalRef;
...
public openModal(content: string) {
    this.mr = this.modalService.open(content);
}
...
public closeModal() {
   this.mr.close();
}

【讨论】：

就是这样！非常感谢你：3
这仍然很好用。别忘了import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';

【解决方案2】：

在 Angular 2 中使用引导模式弹出窗口：

在 Html 中：只需复制并粘贴引导模式弹出代码。

在 Ts 文件中：

import {Component} from 'angular2/core';

@Component({
    selector: 'mymodal',
    templateUrl: 'html page url'
})
export class ModalComp {
}

然后你可以在任何 html 视图中通过导入 TS 文件来使用这个组件。

import {ModalComp} from '/your component location';

在视图中：

<mymodal></mymodal>

【讨论】：

我对模板或打开模式没有任何问题
问题说明 angular 2