ngx-bootstrap, Component Modal, селектор "modal-content" не соответствует ни одному элементу - PullRequest
Новая
       22

ngx-bootstrap, Component Modal, селектор "modal-content" не соответствует ни одному элементу

0 голосов
/ 03 апреля 2019

у меня Angular 7 "ngx-bootstrap": "^3.1.4" и "bootstrap": "^4.3.1"

Совместимы ли они вообще?

Я пытаюсь открыть компонент в модале, как этот вопрос: ngx-bootstrap Как открыть модал из другого компонента?

Однако я получаю эту ошибку:

Ошибка: ошибка (в обещании): ошибка: StaticInjectorError (AppModule) [DialogBoxComponent -> BsModalRef]: StaticInjectorError (Платформа: ядро) [DialogBoxComponent -> BsModalRef]: NullInjectorError: Нет поставщика для BsModalRef! Ошибка: StaticInjectorError (AppModule) [DialogBoxComponent -> BsModalRef]:

Я импортировал ngx в свой модуль как: 

        import { BrowserModule } from "@angular/platform-browser";
    import { NgModule } from "@angular/core";
    import { HttpClientModule } from "@angular/common/http";

    import { AppComponent } from "./app.component";
    import { AppHeaderComponent } from './app-header/app-header.component';
    import { AppFooterComponent } from './app-footer/app-footer.component';
    import { AppRoutingModule } from './app-routing.module';
    import { PoliciesComponent } from './policies/policies.component';
    import { AddComponent } from './add/add.component';
    import { ReactiveFormsModule } from '@angular/forms';
    import { ModalModule } from 'ngx-bootstrap';
    import { ModalContentComponent } from './modal-content/modal-content.component';


    @NgModule({
      declarations: [AppComponent, AppHeaderComponent, AppFooterComponent, PoliciesComponent, AddComponent, ModalContentComponent],
      imports: [
        ModalModule.forRoot(),
        HttpClientModule,
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule

      ],
      providers: [],
      bootstrap: [AppComponent, ModalContentComponent]
    })
    export class AppModule { }



    import { Component } from '@angular/core';
    import { BsModalRef } from 'ngx-bootstrap/modal';

    @Component({
      selector: 'modal-content',
      templateUrl: './modal-content.component.html',
    })

    export class ModalContentComponent {
      title: string;
      closeBtnName: string;
      list: any[] = [];

      constructor(public bsModalRef: BsModalRef) { }

      ngOnInit() {
        this.list.push('PROFIT!!!');
      }
    }

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { PoliciesService } from './policies.service';
import { Policy } from 'src/models/policy';
import { Gender } from 'src/models/gender';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { ModalContentComponent } from '../modal-content/modal-content.component';

@Component({
  selector: 'app-policies',
  templateUrl: './policies.component.html',
  styleUrls: ['./policies.component.scss']
})
export class PoliciesComponent implements OnInit {
  gender = Gender;
  policies: Policy[];
  bsModalRef: BsModalRef;

  constructor(private policiesService: PoliciesService, private modalService: BsModalService) { }

  ngOnInit() {
    this.policiesService
      .getAll()
      .subscribe(p => this.policies = p);
  }

  deleteClicked(id: number) {
    this.policiesService
      .delete(id)
      .subscribe(() => this.deleteFrom(this.policies, id));
  }

  private deleteFrom(arr: Policy[], id: number) {
    arr.splice(arr.findIndex((p: Policy) => p.policyNumber === id), 1);
  }

  openModalWithComponent() {
    const initialState = {
      list: [
        'Open a modal with component',
        'Pass your data',
        'Do something else',
        '...'
      ],
      title: 'Modal with component'
    };
    this.bsModalRef = this.modalService.show(ModalContentComponent, { initialState });
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}

1 Ответ

0 голосов
/ 03 апреля 2019

У меня была ошибка, когда я добавил ModalContentComponent. Следует добавить, как показано ниже, в модуль: 

providers: [],
  entryComponents: [ModalContentComponent],
  bootstrap: [AppComponent]
})
...