@NgModule.entryComponents 和动态创建的组件 [英] @NgModule.entryComponents and Components created dynamically

问题描述

我以两种不同的方式打开一个 Modal Stackblitz 示例:

1. 在调用 Modal 服务的组件中调用方法:

   <button (click)="openModal()">Open Modal</button>导出类 AppComponent {构造函数(私有modalService:ModalService){}openModal() {this.modalService.open(HelloComponent);}}

   Modal 服务动态创建组件.

2. 使用随后调用 ModalService 的指令:

选项 (1) 工作正常，但选项 (2) 返回错误:

错误:找不到 HelloComponent 的组件工厂.你把它添加到@NgModule.entryComponents 了吗?

我的 AppModule 中有以下内容:

@NgModule({进口:[ BrowserModule，FormsModule ]，出口:[ ModalDirective ]，声明:[ AppComponent, HelloComponent, ModalDirective ],entryComponents: [HelloComponent],引导程序:[ AppComponent ]})

所以我不确定为什么这不起作用......

解决方案

您需要为 HelloComponent 的引用添加别名.

更新app.component

导出类 AppComponent {modalComp = HelloComponent;构造函数(私有modalService:ModalService){}openModal() {this.modalService.open(this.modalComp);}}

和模板:

<h1>模态示例</h1><button (click)="openModal()">打开模态</button><button [modal]="modalComp">打开模态</button>

更新堆栈闪电战:https://stackblitz.com/edit/mk-angular-modal-service-bzn8z7?file=src%2Fapp%2Fapp.component.html

I am opening a Modal in two different ways Stackblitz Example:

1. Calling a method in a component which calls the Modal Service:

   <button (click)="openModal()">Open Modal</button>
   
   export class AppComponent  {
   
     constructor(private modalService: ModalService) { }
   
     openModal() {
       this.modalService.open(HelloComponent);
     }
   
   }
   

   The Modal service creates the component dynamically.

2. Using a directive that then calls the ModalService:

   <button [modal]="'HelloComponent'">Open Modal</button>
   
   @Directive({
     selector: '[modal]'
   })
   
   export class ModalDirective {
   
     @Input('modal') identifier: string;
   
     constructor(private modalService: ModalService) { }
   
     @HostListener('click', ['$event'])
     clickEvent(event) {
   
       event.preventDefault();
       event.stopPropagation();
       this.modalService.open(this.identifier);
   
     }
   
   }
   

Option (1) works fine but option (2) returns an error:

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

I have in my AppModule the following:

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

So I am not sure why this is not working ...

解决方案

You need to alias the reference to HelloComponent.

Update app.component

export class AppComponent  {

  modalComp = HelloComponent;

  constructor(private modalService: ModalService) { }

  openModal() {
    this.modalService.open(this.modalComp);
  }

}

and template:

<div style="text-align:center">
  <h1>Modal Example</h1>

  <button (click)="openModal()">Open Modal</button>

  <button [modal]="modalComp">Open Modal</button>

</div>

Updated stackblitz: https://stackblitz.com/edit/mk-angular-modal-service-bzn8z7?file=src%2Fapp%2Fapp.component.html

这篇关于@NgModule.entryComponents 和动态创建的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！