Я уже рассмотрел следующие два потока, которые были об использовании компонента, переданного декларативно ( 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)
}
}
Этот магазин Работая нормально, вся информация успешно синхронизируется в любых компонентах. Мне нужно, чтобы она была:
Теперь, когда я добавляю ее в модуль маршрутизации, это приводит к путанице. Я хотел бы просто иметь возможность помещать данные компонента, поступающие косвенно, в массив 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?
Пожалуйста, дайте мне знать, если я могу быть более ясным по чему-либо!
Спасибо