В Angular 8 как передать компонент на вход другого компонента, а затем использовать его обязательно в модуле маршрутизатора - PullRequest
0 голосов
/ 20 апреля 2020

Я уже рассмотрел следующие два потока, которые были об использовании компонента, переданного декларативно ( 1 , 2 , contentChildren , ng -content ) в шаблоне, я спрашиваю, как можно передать компонент и использовать его обязательно (в модуле маршрутизации).

Вариант использования будет для использования в библиотеке компонентов. Передача компонента в пакет для автоматической маршрутизации и отображения с использованием розетки маршрутизатора. Другими словами, я работаю над интерфейсом пакета angular npm и приложения angular, пытаясь передать компонент angular среди других свойств настройки маршрутизации из приложения angular в angular npm пакет, который будет использоваться для передачи информации для установки маршрута, который направляет к этому компоненту.

Итак, в данный момент он будет начинаться с передачи данных приложения c, определяемых приложением в API publi c пакета, используя этот объект app-collection:

@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)
    }
  }

Этот магазин Работая нормально, вся информация успешно синхронизируется в любых компонентах. Мне нужно, чтобы она была: console showing data coming through and syncing within the package

Теперь, когда я добавляю ее в модуль маршрутизации, это приводит к путанице. Я хотел бы просто иметь возможность помещать данные компонента, поступающие косвенно, в массив Routes, но, похоже, я не могу, потому что он используется в метаданных NgModule до инициализации. Поэтому вместо этого я обновляю конфигурацию Routes и освобождаю эти маршруты на нее в appConfigFunction, которая вызывается (после завершения обработки метаданных модуля?) В конструкторе.

Ссылки маршрутизатора работают и указываются правильно в эти адреса, но когда я щелкаю по ним, они выдают эту ошибку:

core. js: 6014 Ошибка: Ошибка (в обещании): Ошибка: не найдена фабрика компонентов для ShortOrdersComponent. Вы добавили его в @ NgModule.entryComponents? Ошибка: не найдена фабрика компонентов для ShortOrdersComponent. Вы добавили его в @ NgModule.entryComponents? в noComponentFactoryError (core. js: 25607) в CodegenComponentFactoryResolver.resolveComponentFactory (core. js: 25683) в RouterOutlet.activateWith (маршрутизатор. js: 8757) в ActivateRoutes.activate * 001) 001. в маршрутизаторе. js: 3947 в Array.forEach () в ActivateRoutes.activateChildRoutes (маршрутизатор. js: 3942) в ActivateRoutes.activate (маршрутизатор. js: 3805) в MapSubscriber.project (маршрутизатор. js : 3778) в MapSubscriber._next (map. js: 29) в resolPromise (зона-вечнозеленая. js: 797) в resolPromise (зона-вечнозеленая. js: 754) в зоне-вечнозеленая. 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) в изображении driMicroTaskQueue (zone-evergreen. js: 559) в ZoneTask.invokeTask [as invoke] (zone-evergreen. js: 469) в invokeTask (zone-evergreen. js: 1603) defaultErrorLogger @ core. js: 6014 handleError @ core. * 107 5 *: 6066 next @ core. js: 40558 schedulerFn @ core. js: 35336 __tryOrUnsub @ Подписчик. js: 183 следующий @ Подписчик. js: 122 _next @ Подписчик. js: 72 следующий @ Подписчик. js: 49 следующий @ Тема. js: 39 emit @ core. js: 35298 (анонимный) @ core. js: 39738 invoke @ zone-evergreen. js: 359 run @ zone-evergreen. js: 124 runOutside Angular @ core. js: 39572 onHandleError @ core. js: 39735 handleError @ zone-evergreen. js: 363 runGuarded @ zone-evergreen. js : 137 api.microtaskDrainDone @ zone-evergreen. js: 663 dumpMicroTaskQueue @ zone-evergreen. js: 566 invokeTask @ zone-evergreen. js: 469 invokeTask @ zone-evergreen. js: 1603 globalZoneAwareCallback @ evergreen. js: 1629

Я читал о entryComponents и не уверен, как добавить эти компоненты в пакеты entryComponents, но также удивляюсь, почему мне даже нужно это сделать, поскольку я получаю весь Экземпляр компонента через ввод успешно, как вы можете видеть в приведенном выше журнале консоли. Я также импортирую (и экспортирую на всякий случай, если это что-то изменило) тот компонент, который я загружаю в пакет, уже в самом приложении (в модуле этих компонентов):

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

Как мне сделать эту ошибку go удалите и добавьте ее в entryComponents или сделайте так, чтобы мне не нужно было добавлять ее в entryComponents?

Пожалуйста, дайте мне знать, если я могу быть более ясным по чему-либо!

Спасибо

1 Ответ

1 голос
/ 20 апреля 2020

Обычно компоненты, которые вы определяете в своем маршрутизаторе, автоматически добавляются в entryComponents, см. https://angular.io/guide/entry-components

Но иногда вам может понадобиться добавить их вручную:

const COMPONENTS = [ShortLocatesComponent, ShortOrdersComponent];

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