Question

我正在尝试使用ng-bootstrap打开模式。我的引导程序版本是4.3.1。我还在“ entryComponents”部分中输入了组件模式条目。完成上述所有操作后，我仍然收到错误消息

“找不到NgbModalBackdrop的组件工厂。是否将其添加到@ NgModule.entryComponents？”

下面是我的app.module.ts代码

从'@ angular / platform-browser'导入{BrowserModule}; 从'@ angular / core'导入{NgModule};

import { AppComponent } from './app.component';
import { NavigationComponent } from './navigation/navigation.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { ContainerComponent } from './container/container.component';
import { InnerContainerComponent } from './inner-container/inner-container.component';
import { HomeComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { BoxesComponent } from './boxes/boxes.component';
import { FeaturesComponent } from './features/features.component';
import { SliderComponent } from './home/slider/slider.component';
import { LoginmodalComponent } from './header/loginmodal/loginmodal.component';

@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent,
    HeaderComponent,
    FooterComponent,
    ContainerComponent,
    InnerContainerComponent,
    HomeComponent,
    ProductsComponent,
    BoxesComponent,
    FeaturesComponent,
    SliderComponent,
    LoginmodalComponent
  ],
  entryComponents:[
    LoginmodalComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

模态组件代码为：

LoginModalComponent

import { Component} from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-loginmodal',
  templateUrl: './loginmodal.component.html',
  styleUrls: ['./loginmodal.component.css']
})
export class LoginmodalComponent{

  constructor(public activeModal: NgbActiveModal) {}

}

和下面是我的呼叫者组件代码：

HeaderComponent

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { LoginmodalComponent } from './loginmodal/loginmodal.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(private modalService: NgbModal) { }

  ngOnInit() {
  }

  open(){
    this.modalService.open(LoginmodalComponent);
  }

}

NgBootstrap模式未打开

0 个答案: