Angular 7 + ngx-bootstrap 3.1.3

Question

Here 是 stackblitz 中的空白 angular 7 项目，在 Angular 6 中我使用了 constructor(private bsModalRef: BsModalRef) 以便我可以将值传递给我的子弹出组件。

但是当我更新到angular 7时，它说Module not found: Error: Can't resolve 'ngx-bootstrap/modal/bs-modal-ref.service'。

在 stackblitz 中，它要求我安装 ngx-bootstrap 但我已经安装了。

有什么想法吗？

Answer 1

根据文档 here，您需要将 BsModalService 作为依赖项注入。但是你正在注入 BsModalRef.

正确的语法如下：

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
...
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}

openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template);
}

这里有一个 Working StackBlitz Example 供您参考。

Answer 2

首先，您需要在 app.component.ts 中更改导入来自

import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

到

import { BsModalRef } from 'ngx-bootstrap';

那么您必须在 app.module

中提供提供商

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

@NgModule({
  imports:      [ BrowserModule, FormsModule,ModalModule.forRoot(),
  BsDropdownModule.forRoot() ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [BsModalRef]
})
export class AppModule { }

工作STACKBLITZ

Answer 3

请

import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service'

并将 BsModalService 作为依赖注入。

Angular 7 + ngx-bootstrap 3.1.3

Angular 7 + ngx-bootstrap 3.1.3

ngx-bootstrap

angular

ngx-bootstrap-modal

angular7