web-dev-qa-db-fra.com

Angular 7 + ngx-bootstrap 3.1.3

Ici est un projet angulaire vide 7 dans stackblitz, dans Angular 6 J'ai utilisé constructor(private bsModalRef: BsModalRef) pour pouvoir transmettre des valeurs à mon composant contextuel enfant. 

Mais quand je mets à jour angulaire 7, il a dit Module not found: Error: Can't resolve 'ngx-bootstrap/modal/bs-modal-ref.service'.

Dans stackblitz, il m'a demandé d'installer ngx-bootstrap mais je l'ai déjà installé.

Une idée?

angularngx-bootstrapangular7ngx-bootstrap-modal
5
Kunyuan Xiao

La première chose à faire est de modifier votre importation dans app.component.ts de 

importer {BsModalRef} de 'ngx-bootstrap/modal/bs-modal-ref.service';

à

importer {BsModalRef} de 'ngx-bootstrap';

alors vous devrez fournir des fournisseurs en 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 { }

travail STACKBLITZ

4
Abhishek Ekaanth

Selon les docs ici , vous devrez injecter la BsModalService en tant que dépendance. Mais vous injectez BsModalRef.

Voici la syntaxe correcte:

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);
}

Voici un exemple Working StackBlitz pour votre réf.

0
SiddAjmera