在Angular 8中，如何将一个组件传递到另一个组件的输入中，然后在路由器模块中强制使用它

Question

我已经查看了以下两个线程，它们使用的是在模板中使用声明性传递的组件（1，2），我问一个人如何可以传入一个组件并强制使用它（在路由模块）。

用例将在组件库中使用。将组件传递到包装中，以自动路由到路由器插座并通过路由器插座显示。

因此，从现在开始，将使用此应用程序集合对象将应用程序特定的数据传递到包的公共API中：

@Component({
  selector: 'app-geode-app-test',
  templateUrl: './geode-app-test.component.html',
  styleUrls: ['./geode-app-test.component.scss']
})
export class GeodeAppTestComponent implements OnInit {

  environment: Environment;
  appCollections: AppCollectionInterface[];

  constructor() { }

  ngOnInit() {
    this.environment = environment;
    this.appCollections = [
      {
        'name': 'Short Locates',
        'routerId': 'shortLocates',
        'image': null,
        'entitlements': 'SHORT_LOCATE_READ',
        'component': ShortLocatesComponent
      },
      {
        'name': 'Short Sell Orders',
        'routerId': 'shortSellOrders',
        'image': null,
        'entitlements': 'SHORT_SELL_ORDER_READ,SHORT_SELL_ORDER_READ_MY_FUNDS',
        'component': ShortOrdersComponent
      },
    ]
  }

}

然后，在其模板中，它将像这样与包交互：

<lib-geode-app [environment]="environment" [appCollections]="appCollections"></lib-geode-app>

忽略环境输入。我们专注于appCollections输入。

在要输入其内容的程序包的最顶层组件中，我正在将程序包范围的OnChanges更新为输入：

  ngOnChanges(changes: SimpleChanges): void {
    console.log('%c⧭', 'color: #00e600', changes);
    if (changes.environment.currentValue) {
      this.environmentSvc.environmentSubject.next(changes.environment.currentValue)
    }

    if (changes.appCollections.currentValue) {
      console.log('%c⧭', 'color: #f2ceb6', changes.appCollections.currentValue);
      this.appCollSvc.appCollectionsSubject.next(changes.appCollections.currentValue)
    }
  }

此商店工作正常，所有信息都已成功同步到我需要的任何组件中：

现在，当我将其带入路由模块时，这会引起混乱。我希望能够将组件数据间接放入Routes数组中，但似乎不行，因为在初始化之前，该数据已在NgModule元数据中使用。因此，我改为更新Routes配置，并在构造函数中调用appConfigFunction中将这些路由移到它上面（在处理完模块元数据之后？）。

路由器链接正在工作，并正确指向这些地址位置，但是当我单击它们时，它们会引发此错误：

core.js：6014错误错误：未捕获（承诺）：错误：无组件工厂找到ShortOrdersComponent。您是否将其添加到@ NgModule.entryComponents？错误：找不到用于的组件工厂ShortOrdersComponent。您是否将其添加到@ NgModule.entryComponents？在noComponentFactoryError（core.js：25607）在CodegenComponentFactoryResolver.resolveComponentFactory（core.js：25683）在RouterOutlet.activateWith（router.js：8757）在ActivateRoutes.activateRoutes（router.js：4010）在router.js：3947在Array.forEach（）在ActivateRoutes.activateChildRoutes（router.js：3942）在ActivateRoutes.activate（router.js：3805）在MapSubscriber.project（router.js：3778）在MapSubscriber._next（map.js：29）在resolvePromise（zone-evergreen.js：797）在resolvePromise（zone-evergreen.js：754）在zone-evergreen.js：858在ZoneDelegate.invokeTask（zone-evergreen.js：391）在Object.onInvokeTask（core.js：39680）在ZoneDelegate.invokeTask（zone-evergreen.js：390）在Zone.runTask（zone-evergreen.js：168）在排水微任务队列（zone-evergreen.js：559）在ZoneTask.invokeTask上[作为调用]（zone-evergreen.js：469）在invokeTask（zone-evergreen.js：1603）处defaultErrorLogger @ core.js：6014 handleError @ core.js：6066下一个@ core.js：40558schedulerFn @ core.js：35336__tryOrUnsub @ Subscriber.js：183下一个@ Subscriber.js：122_next @ Subscriber.js：72下一个@ Subscriber.js：49下一个@ Subject.js：39发出@ core.js：35298（匿名）@ core.js：39738 invoke @zone-evergreen.js：359运行@ zone-evergreen.js：124 runOutsideAngular @core.js：39572 onHandleError @ core.js：39735 handleError @zone-evergreen.js：363 runGuarded @ zone-evergreen.js：137api.microtaskDrainDone @ zone-evergreen.js：663rainMicroTaskQueue @zone-evergreen.js：566 invokeTask @ zone-evergreen.js：469 invokeTask @zone-evergreen.js：1603 globalZoneAwareCallback @zone-evergreen.js：1629

我了解了entryComponents，但不确定如何将这些组件添加到package entryComponents中，还想知道为什么我甚至需要这样做，因为我通过输入成功接收了整个组件实例，如您在上述控制台中看到的那样日志。我也正在导入（并导出，以防万一），我正在包装中的组件（已经在应用程序本身中）（在该组件模块中）：

@NgModule({
  imports: [....],
  declarations: [
    ShortLocatesComponent,
    ShortOrdersComponent,
  ],
  providers: [LocatorService],
  exports: [
    ShortLocatesComponent,
    ShortOrdersComponent,
  ]
})
export class LocatorModule { }

如何解决此错误，将其添加到entryComponents或使其消失，这样我就不必将其添加到entryComponents？

请让我知道我是否可以更清楚地了解任何事情！

谢谢

Answer 1

通常，您在路由器中定义的组件会自动添加到entryComponents中，请参见https://angular.io/guide/entry-components

但是有时您可能必须手动添加它们：

const COMPONENTS = [ShortLocatesComponent, ShortOrdersComponent];

@NgModule({
  imports: [....],
  declarations: [...COMPONENTS],
  providers: [LocatorService],
  exports: [...COMPONENTS],
  entryComponents: [...COMPONENTS]
})
export class LocatorModule { }