Angular 7 的简单 ModalService 未打开：未找到组件工厂

Question

我正在创建一个 Angular 的 7 ModalService，它只打开一个 Modal (StackBlitz Example)。

Modal内容应该是打开时传递给Modal的Component。

模态

export class Modal {

  protected modal: any = null;

  close() {
    this.modal.close();
  }

}

模态服务

import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ModalService {

  private componentRef: any;
  private modalContainer: any;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector) { }

  private createFormModal(component: any): Element {

    this.componentRef = this.componentFactoryResolver.resolveComponentFactory(component.component).create(this.injector);

    this.componentRef.instance.modal = this;

    this.appRef.attachView(this.componentRef.hostView);

    return (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
  }

  open(component: any): void {

    const alertElement = this.createFormModal(component);

    const content = document.createElement('div');
    content.classList.add('modal');
    content.appendChild(alertElement);

    this.modalContainer = document.createElement('div');
    this.modalContainer.classList.add('modal');
    this.modalContainer.appendChild(content);

    document.body.appendChild(this.modalContainer);

  }

  close(): void {
    this.appRef.detachView(this.componentRef.hostView);
    this.modalContainer.parentNode.removeChild(this.modalContainer);
    this.componentRef.destroy();
  }

}

我不确定这是否是最佳选择，但它不起作用...

当我尝试打开模式时出现以下错误：

Error: No component factory found for HelloComponent. 
       Did you add it to  Did you add it to @NgModule.entryComponents?

我错过了什么？我可以改进这个 ModalService 代码吗？

Answer 1

如错误所示，如果您需要将组件呈现为模态内容，则需要将组件添加到根模块 entryComponents 的数组中 app.module.ts。这是必需的，因为根据 angular 文档，如果您按类型动态加载组件（使用 ComponentFactoryResolver），那么您需要将该组件添加到根模块的 entryComponents 数组中. 因为这些组件未在您的 angular 应用程序中通过模板或选择器引用。

所以你的 app.module.ts 应该是这样的 -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  entryComponents:[HelloComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这是更新后的 stackblitz 演示 -

https://stackblitz.com/edit/mk-angular-modal-service-6qhrps

这里有更多关于 entryComponents

的信息

https://angular.io/guide/entry-components

您的模式中仍有一些 css 问题需要修复。

Answer 2

在 @NgModule 的条目组件中添加 HelloComponent:

@NgModule({
     imports:[ BrowserModule, FormsModule ],
     declarations:[ AppComponent, HelloComponent ],
      entryComponents:[HelloComponent],
      bootstrap: [ AppComponent ]
 })

 export class AppModule { }

Angular 7 的简单 ModalService 未打开：未找到组件工厂

Simple ModalService for Angular 7 does not open: No component factory found for

angular

angular7