Question

我有Angular 7 "ngx-bootstrap": "^3.1.4"和"bootstrap": "^4.3.1"

这些完全兼容吗？

我试图以模式方式打开组件，如下所示：ngx-bootstrap How to open a modal from another component?

但是我遇到此错误：

错误错误：未捕获（承诺）：错误：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';
  }
}

Answer 1

我在添加ModalContentComponent时出错。它应按以下方式添加到模块中：

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

ngx-bootstrap，组件模式，选择器“ modal-content”与任何元素都不匹配

1 个答案: