2

由于某些业务逻辑，我必须读取动态组件（EntryComponents）的元数据。

要读取元数据，以下是我的方法。

  1. 使用ComponentFactoryResolver读取模块的所有组件
  2. 使用组件名称和特定方法过滤掉类
  3. 创建组件并读取数据
  4. 销毁组件。

.

const factories = Array.from<any>(this.resolver['_factories'].keys());
console.log(factories); // Logging all the factories

factories.forEach(element => {
  if (element.prototype.registerReportCard) { // checking if this is dynamic component. Because dynamic component will have registerReportCard method in it
    temp.push(element.prototype.constructor.name); // if this is my dynamic component, push the name into another array "tmp".
  }
});

temp.forEach(componentName => { // stored component name from above
    const factoryClass = factories.find( // finding that component which have registerReportCard  method and has name same as iterator.
      item =>
        item.prototype.registerReportCard &&
        item.prototype.constructor.name === componentName
    );
    // component found, obviously.
    const component = this.resolver
      .resolveComponentFactory(factoryClass)
      .create(this.createInjector()); // creating the component and passing in the injector.

    console.log('component', component);

    const componentMeta = component.instance[
      'componentMeta'
    ] as ReportComponentMetaInterface; // Reading the DATA which i need.


    component.destroy(); // destroying the component after reading the data.
  });

createInjector() {
    const staticProvider = [{ provide: [], useValue: '' }];

    return Injector.create(staticProvider);
 }

问题

在开发过程中，工厂名称工作正常，并且与动态组件类相同。

但是在使用 ng build --prod 构建项目之后。工厂名称如下 在此处输入图像描述

如您所见，首先我在哪里以及为什么会收到错误 IDK。

其次，工厂类名称相同。因此，相同的动态组件被加载了 10 次（因为有 10 个动态组件）。

这是 NgModule

@NgModule({


 declarations: [
    DynamicComponentLoaderDirective,
    ContactsCreatedByDayComponent,
    ReportSkeletonComponent,
    SalesPerformanceComponent,
    TopPersonasComponent,
    ContactsOverviewComponent,
    CompaniesRevenueConversionComponent,
    ClosedCompaniesConversionComponent,
    AverageTimeCloseComponent,
    AverageTimeResponseComponent,
    ContactLifecyclePipelineComponent
  ],
  imports: [
    CommonModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    ChartsModule
  ],
  entryComponents: [ContactsCreatedByDayComponent, SalesPerformanceComponent, TopPersonasComponent , ContactsOverviewComponent, CompaniesRevenueConversionComponent, ClosedCompaniesConversionComponent, AverageTimeCloseComponent, AverageTimeResponseComponent, ContactLifecyclePipelineComponent],
  exports: [DynamicComponentLoaderDirective, ReportSkeletonComponent, TopPersonasComponent, ContactsOverviewComponent, CompaniesRevenueConversionComponent, ClosedCompaniesConversionComponent, AverageTimeCloseComponent, AverageTimeResponseComponent, ContactLifecyclePipelineComponent],
  providers: [DashboardReportService]
})
export class DashboardSharedModule {}

我真的不知道为什么会这样。有人可以把我放在正确的方向吗？

4

1 回答 1

2

--prod 标志将缩小应用于您的代码，这会导致“...constructor.name”以类似于“a.name”的形式结束。这是你的问题的原因。根本问题是您的代码不适用于缩小，您应该对其进行调整。您可以将构建配置为不优化（当前 Angular 版本中的 angular.json），但缩小有其意义，因此您应该尝试找到一种方法以不同方式提供类名，例如使用包含您的名称的字符串函数参数可以做到这一点。将数据传递给 entryComponents 的另一种实现，您可以在 Angular Material 上进行比较，MatDialogs 实际上是 entryComponents，它获取 MAT_DIALOG_DATA 您可以通过注入以您想要的方式指定：https ://material.angular.io/components/dialog 。

于 2019-06-11T21:09:58.703 回答