时间戳

首页 > 解决方案 > 组件作为角度 8 中的 ngBootstrap 模态内容

javascript - 组件作为角度 8 中的 ngBootstrap 模态内容

问题描述

我正在尝试制作一个以组件为内容的模式，但出现此错误：

未找到 AddLessonComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

调用者组件html：

<button class="btn btn-primary dark" (click)="addLessons()">הוסף שיעורים</button>

调用方组件 ts：

import { Component, OnInit, Input, Output, EventEmitter, NgModule } from '@angular/core';
import { NgbModalConfig, NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { AddLessonComponent } from '../add-lesson/add-lesson.component';

@Component({
  selector: 'app-speciality',
  templateUrl: './speciality.component.html',
  styleUrls: ['./speciality.component.scss'],
  providers: [NgbModalConfig, NgbModal]
})
export class SpecialityComponent implements OnInit {
  constructor(private modalService: NgbModal)
  ngOnInit() {}
  addLessons() {
    const modalRe = this.modalService.open(AddLessonComponent);
    modalRe.componentInstance.name = 'World';
  }
}

内容组件html：

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

内容组件 ts：

import { Component, OnInit, Inject, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-add-lesson',
  templateUrl: './add-lesson.component.html',
  styleUrls: ['./add-lesson.component.scss']
})
export class AddLessonComponent implements OnInit {

    @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
    ngOnInit() {
    }
}

应用模块：

import { NgModule, Component } from '@angular/core';
import { NgbModule,NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
import { SpecialityComponent } from './COMPONENTS/speciality/speciality.component';
import { AddLessonComponent } from './components/add-lesson/add-lesson.component';


@NgModule({
  declarations: [
   SpecialityComponent,
   AddLessonComponent,
  ],
  imports: [
 NgbModule,NgbModalModule
  ],
  entryComponents: [AddLessonComponent]
})
export class AppModule { }

标签： javascriptangularpopupng-bootstrap

解决方案

请检查以下链接：

https://stackblitz.com/edit/angular-nd5ihf

  1. 据我所知，您所显示的错误是因为您没有在入口组件中编写内容组件但您已经完成了

  2. 如果您只有两个组件并且这是您的结构，那么 AppModule 中缺少其他一些点，例如

    引导程序：[专业组件]，

BrowserModule 的导入

我刚刚更新了 AppModule，您的代码运行良好。

推荐阅读