Положение:
Мы разрабатываем угловое приложение, которое использует одни и те же поля выбора ввода в различных формах по всему приложению. Идея заключалась в том, чтобы объединить все общие компоненты в shared-component.module.ts и затем импортировать общий модуль в каждую форму, где это может быть применимо / требуется.
Используя реактивные формы, мы объявляем свойства как:
export class FormComponent implements OnInit {
form = new FormGroup({
employeeId: new FormControl('')
});
Связывание на уровне формы выглядит следующим образом:
<div class="form-group">
<employee-select [employeeId]="employeeId">
</employee-select>
</div>
С компонентом, принимающим [employeeId] в качестве входа FormControl:
export class EmployeeSelectComponent implements OnInit {
employees: Employee[]
@Input() employeeId: FormControl;
проблема
Когда мы используем объявление разделяемого модуля для импорта компонентов:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EmployeeSelectComponent } from '../../components/employee-select/employee-select.component';
@NgModule({
imports: [
CommonModule
],
declarations: [
EmployeeSelectComponent
],
exports: [
EmployeeSelectComponent
]
})
export class SharedComponentModule { }
и импортируйте SharedComponentModule в общий admin.module.ts:
import { SharedComponentModule } from '../../shared/modules/shared-component/shared-component.module';
компоненты работают, но значения не привязываются к родительской форме?
(даже при передаче всей формы как @Input() компоненту, как рекомендовано на различных сайтах.
При импорте каждого компонента по отдельности непосредственно в admin.module.ts привязка работает без проблем?
Может ли кто-нибудь предоставить дополнительную информацию о том, почему компоненты работают должным образом, но при использовании shared-component.module.ts, который инкапсулирует все общие компоненты, происходит сбой только привязки к родительской форме.
Но при прямом импорте привязка значения к родительской форме работает правильно.
Реальный вопрос заключается в том, как создать модуль, который бы правильно инкапсулировал общие компоненты, чтобы нам пришлось импортировать только 1 модуль, а не все общие компоненты по отдельности.
также пытался
с использованием exports: [] для экспорта shared-component.module.ts из admin.module.ts, но это не сработало.