Question

我需要动态加载组件才能在单击某些按钮时查看。我已经在自定义模块中创建了on指令和一些组件。但是当我尝试创建组件的新实例时，它说没有找到组件工厂。

这是我的代码结构。

仪表板模块

 @NgModule({
      declarations: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent, InsertionDirective],
      imports: [
        CommonModule,
        GridsterModule,
        ButtonsModule,
        ChartsModule,
        DropDownsModule
      ],
      entryComponents: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent],
      exports: [MainPageComponent, WidgetComponent, ChartsComponent, GraphsComponent, InfographicsComponent]
    })
    export class DashboardModule {
      static customization(config: any): ModuleWithProviders {
        return {
          ngModule: DashboardModule,
          providers: [
            { provide: Service, useClass: config.service }
          ]
        }
      }
    }

仪表板/插入指令

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInsertion]'
})
export class InsertionDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }
}

1。仪表盘/mainMainPageComponent.ts

 import { Component, OnInit, ViewChild, ComponentFactoryResolver, ComponentRef, Type } from '@angular/core';
        import { Service } from 'src/app/services/service';
        import { Widget } from 'src/app/interface/widget';
        import { GridsterConfig, GridsterItem } from 'angular-gridster2';
        import { SETTINGS } from '../settings'
        import { InsertionDirective } from '../insertion.directive';
        import { ChartComponent } from '@progress/kendo-angular-charts';


        @Component({
          selector: 'dasbhoard-main-page',
          templateUrl: './main-page.component.html',
          styleUrls: ['./main-page.component.css']
        })
        export class MainPageComponent implements OnInit {
          componentRef: ComponentRef<any>;
          childComponentType: Type<any>;
          @ViewChild(InsertionDirective)
          insertionPoint: InsertionDirective;

          public title: string;
          public widgets: Array<{ widget: Widget, grid: GridsterItem, type: string }> = [];
          public options: GridsterConfig;

          constructor(private service: Service, private componentFactoryResolver: ComponentFactoryResolver) {
            this.title = 'Dashboard';
          }


          ngOnInit() {
            this.options = {
              itemChangeCallback: MainPageComponent.itemChange,
              itemResizeCallback: MainPageComponent.itemResize,
            };

          }
          addNewWidget(type: string) {
            let widgetType = SETTINGS.widgetSetting[type];
            let totalWidgets = this.widgets ? this.widgets.length : 0;

            let componentFactory = this.componentFactoryResolver.resolveComponentFactory(widgetType.useClass);
//widgetType.useClass = ChartsComponent
// when I pass it statically its ok 
            //error here 
            let viewContainerRef = this.insertionPoint.viewContainerRef;
            viewContainerRef.clear();
            this.componentRef = viewContainerRef.createComponent(componentFactory);

            this.widgets.push({ widget: { id: totalWidgets, header: `Widget ${totalWidgets} Header`, content: `<h1>Widget ${totalWidgets} Body</h4>` }, grid: { cols: 1, rows: 1, x: 0, y: 0 }, type: type });

          }
        }

dashboard / main-component / main-component.html

<ng-template appInsertion> </ng-template>     
<button kendoButton(click) = "addNewWidget('charts')"[primary] = "true" class="pull-right" > Add Chart Widget </button>

我每一个帖子都有，所有人都说您需要在入口点插入组件，但是我已经将所有组件都包括在入口点了。而且所有组件都在同一个模块中，但仍然显示为ChartsComponent找不到组件工厂。您是否将其添加到@ NgModule.entryComponents？。

任何人都可以找出我做错了什么地方吗？

谢谢。

Answer 1

我认为这只是一个错字：在entryComponents中，您已经编写了 ChartsComponent ；在resolveComponentFactory方法中，您已经编写了 ChartComponent

可以吗？

在angular 7中动态加载组件时出错。找不到组件工厂

1 个答案: