wake-up-neo.com

Angular 7 + ngx-bootstrap 3.1.3

Hier ist ein leeres eckiges 7-Projekt in stackblitz, in Angular 6 habe ich constructor(private bsModalRef: BsModalRef) verwendet, damit ich Werte an meine untergeordnete Popupkomponente übergeben kann. 

Aber wenn ich auf Winkel 7 aktualisiere, wurde Module not found: Error: Can't resolve 'ngx-bootstrap/modal/bs-modal-ref.service' angezeigt.

In stackblitz wurde ich aufgefordert, ngx-bootstrap zu installieren, aber ich habe es bereits installiert.

Irgendeine Idee?

5
Kunyuan Xiao

Als Erstes müssen Sie Ihren Import in app.component.ts.__ ändern. von 

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

zu

importiere {BsModalRef} von 'ngx-bootstrap';

dann müssen Sie Anbieter in app.module angeben 

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 { }

arbeiten STACKBLITZ

4

Gemäß den Dokumenten hier müssen Sie die BsModalService als Abhängigkeit einfügen. Aber Sie injizieren BsModalRef.

Hier ist die richtige Syntax:

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

Hier ist ein Working StackBlitz-Beispiel für Ihren Hinweis.

0
SiddAjmera