首页 文章

Angular2 ng-bootstrap模块在组件中关闭

提问于
浏览 次
4

当输入正常时，我将通过保存关闭组件中的引导模式 . 我正在使用angular 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();
}

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

angular modal-dialog ng-bootstrap

2 回答

  • -1

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

    public mr: NgbModalRef;
...
public openModal(content: string) {
    this.mr = this.modalService.open(content);
}
...
public closeModal() {
   this.mr.close();
}
    回复于
  • 10

    在角度2中使用bootstrap模态弹出：

    在Html中：只需复制并粘贴bootstrap模式弹出代码即可 .

    在Ts文件中：

    import {Component} from 'angular2/core';

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

    然后，您可以通过导入TS文件在任何html视图中使用此组件 .

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

    在视图中：

    <mymodal></mymodal>
    回复于

相关问题