Question

我试图使用这个＆＃39; BsModalService＆＃39;打开模态，但我收到以下错误。

compiler.js:485 Uncaught Error: Can't resolve all parameters for AppComponent: (?, [object Object], [object Object]).

这是我的组件。

import { Component, ViewChild, HostListener, OnInit, Inject, ElementRef, TemplateRef } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { WINDOW } from "../providers/window.service";

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'app';
  isCollapsed: boolean;
  magicHeight: number;
  invertNavBar: boolean = false;
  modalRef: BsModalRef;
  @ViewChild('navBar') navBarElementView: ElementRef;
  @ViewChild('funcionalidades') funcionalidadeselementView: ElementRef;

  constructor(
    private modalService: BsModalService,
    @Inject(DOCUMENT) private document: Document,
    @Inject(WINDOW) private window

  ) {

  }
}

这是我的模块。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ModalPrincipalComponent} from '../components/modal_principal/modal_principal.component';

import { AppComponent } from './app.component';
import { WINDOW_PROVIDERS } from "../providers/window.service";

@NgModule({
  declarations: [
    AppComponent,
    ModalPrincipalComponent
  ],
  imports: [
    BrowserModule,
    ModalModule.forRoot(),
    CollapseModule.forRoot(),
    CarouselModule.forRoot()
  ],
  providers: [WINDOW_PROVIDERS],
  bootstrap: [AppComponent]
})
export class AppModule { }

有趣的是，如果我将modalService添加为构造函数中的最后一个参数，我就不会收到此错误，但是服务仍然没有被注入，变量值变为未定义。

图书馆一般都在运作，我使用轮播和折叠模块没有任何问题。

我已经尝试删除node_modules文件夹并重新安装，但没有解决问题。

Answer 1

您需要导入 NgbModule 并将其添加到导入

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Answer 2

尝试按如下所示将静态字段添加到您的AppComponent中

__repr__

Answer 3

代替

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

您可以直接写

 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

您需要解决的事情是在您的 app.module.ts

中

import { ModalModule, BsModalRef } from 'ngx-bootstrap/modal';

     imports: [
        ModalModule.forRoot()
   ],
     providers: [
        BsModalRef
   ],

我希望这会对您有所帮助。

因为它对我有用。

ngx bootstrap模式没有正确注入

3 个答案: