Angular 7 + ngx-bootstrap 3.1.3:

6
这里是一个在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,但我已经安装了。有任何想法吗?

你导入了包模块吗? - Sergey
是的。import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; - Kunyuan Xiao
你正在注入 BsModalRef,而应该注入 BsModalService。请查看我的答案以获取更多详细信息。 - SiddAjmera
3个回答

12

首先,您需要在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


它运作了,但为什么文档上说 from 'ngx-bootstrap/modal/bs-modal-ref.service'; 却没有提供者。 - Kunyuan Xiao
无论何时使用服务,您都需要在提供程序中提供它们,否则 Angular 将无法理解它是一个服务。 - Abhishek Ekaanth

1
请。

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

并将BsModalService作为依赖项注入。


0
根据 这里 的文档,你需要将 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);
}

这里有一个使用StackBlitz的可工作示例,供您参考。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接