在 Angular 8 中，如何將一個組件傳遞到另一個組件的輸入中，然后在路由器模塊中強制使用它

Question

我已經查看了以下兩個線程，它們是關於在模板中使用以聲明方式傳入的組件（ 1 、 2 、 contentChildren 、 ng-content ），我在問如何傳入一個組件並強制使用它（在路由模塊）。

該用例將用於組件庫。 將組件傳入 package 以自動路由到並使用路由器插座顯示。 In other words, I am working on the interface of an 'angular npm package' and an 'angular application' trying to pass an angular component among other routing setup properties from the angular application to the angular npm package which will be used to pass information設置路由到該組件的路由。

因此，目前，它將使用以下應用程序集合 object 將特定於應用程序的數據傳遞到包的公共 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
      },
    ]
  }

}

然后，在其模板中，它將與 package 接口，如下所示：

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

忽略環境輸入。 我們專注於 appCollections 輸入。

在其輸入進入的包的最頂層組件中，我將 package 寬存儲 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: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) 在 drainMicroTaskQueue (zone-evergreen.js:559) 在 ZoneTask.invokeTask [作為調用] (zone- evergreen.js:469) 在 invokeTask (zone-evergreen.js:1603) defaultErrorLogger @ core.js:6014 handleError @ core.js:6066 next @ core.js:40558 schedulerFn @ 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 調用 @ 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: 137 api.microtaskDrainDone @ zone-evergreen.js:663 drainMicroTaskQueue @ zone-evergreen.js:566 invokeTask @ zone-evergreen.js:469 invokeTask @ zone-evergreen.js:1603 globalZoneAwareCallback @ zone-evergreen.js:1629

我閱讀了 entryComponents 並且不確定如何將這些組件添加到包 entryComponents 中，但也想知道為什么我什至需要這樣做，因為我通過輸入成功接收了整個組件實例，正如您在上面的控制台日志中看到的那樣。 我還在導入（並導出以防萬一有所不同）我正在輸入 package 的組件，該組件已經在應用程序本身中（在該組件模塊中）：

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

如何使此錯誤 go 消失並將其添加到 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 { }