时间戳

首页 > 解决方案 > 在 Angular 8 中，如何将一个组件传递给另一个组件的输入，然后在路由器模块中强制使用它

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

问题描述

我已经查看了以下两个线程，它们是关于在模板中使用以声明方式传入的组件（1、2、contentChildren、ng-content），我在问如何传入一个组件并强制使用它（在路由模块）。

该用例将用于组件库。将组件传递到包中以自动路由到并使用路由器插座显示。换句话说，我正在研究“角度 npm 包”和“角度应用程序”的接口，试图将角度组件以及其他路由设置属性从角度应用程序传递到角度 npm 包，这将用于传递信息设置路由到该组件的路由。

因此，目前，它将使用此 app-collections 对象将特定于应用程序的数据传递到包的公共 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 () at ActivateRoutes.activateChildRoutes (router.js:3942) at ActivateRoutes.activate (router.js:3805) at MapSubscriber.project (router.js:3778) at MapSubscriber._next (map.js:29) at resolvePromise (zone-evergreen.js:797) 在 resolvePromise (zone-evergreen.js:

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

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

如何使此错误消失并将其添加到 entryComponents 或使其不必添加到 entryComponents？

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

谢谢

标签： angulartypescriptangular-moduleangular-dynamic-components

解决方案

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

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

const COMPONENTS = [ShortLocatesComponent, ShortOrdersComponent];

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

推荐阅读