Question

我正在创建一个Angular的7 ModalService，它仅打开一个Modal（StackBlitz Example）。

模态内容应该是打开时传递给模态的组件。

模式

export class Modal {

  protected modal: any = null;

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

}

ModalService

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

如错误所示，如果需要将组件呈现为模态内容，则需要在根模块<svg width="200px" height="200px" viewBox="0 0 200 200"> <defs> <rect id="path-1" x="75" y="65" width="50" height="100" rx="5"></rect> <mask id="mask-2" fill="white"> <use xlink:href="#bottle-outline"></use> </mask> </defs> <g id="bottle" stroke-width="5" stroke="#916548" fill="none" fill-rule="evenodd"> <rect id="bottle-lid" x="82.5" y="52.5" width="35" height="15" rx="5"></rect> <rect id="bottle-holder" x="117.5" y="55.5" width="30" height="7" rx="3.5"></rect> <g mask="url(#mask-2)"> <rect id="bottle-liquid" stroke="none" fill="#3498DB" x="40" y="80" width="120" height="120" transform="rotate(20 100 140)"></rect> </g> <rect id="bottle-outline" x="77.5" y="67.5" width="45" height="95" rx="5"></rect> </g> </svg>的{{1}}数组中添加组件。这是必需的，因为根据角度文档，如果要强制类型（使用entryComponents动态加载组件，则需要将该组件添加到根模块的app.module.ts数组中。因为模板或选择器没有在您的角度应用程序中引用这些组件。

所以您的ComponentFactoryResolver应该看起来像这样-

entryComponents

这是更新的stackblitz演示-

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

有关app.module.ts

的更多信息

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

您的模式中仍有一些CSS问题需要解决。

Answer 2

在HelloComponent的条目部分中添加@NgModule：

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

 export class AppModule { }

Angular 7的Simple ModalService无法打开：未找到组件工厂

2 个答案: