Создание составных компонентов в Angular

Question

Создание составных компонентов в Angular

Я хочу создать универсальный составной компонент Angular, который состоит из множества полей ввода, которые могут быть использованы внутри нескольких компонентов в приложении.

Например:
Рассмотрим компонент сведений о пользователе, который имеет следующие поля,

Поле Email-InputText

пол-переключатель.

Возрастная Группа-Выпадающий Список

Описание-Текстовая Область.

Я хочу включить этот компонент USER DETAIL в несколько компонентов как ниже:

Из общепринятого мнения я могу сказать, что я просто включаю <app-userdetails> в несколько компонентов.

Но как мне справиться с представленным FormGroupData?
Я имею в виду, как я получаю данные из UserDetail, когда он включен в другой компонент, такой как CreateEmployee?

Я не уверен, правильно ли я объяснил вышеописанный сценарий, пожалуйста, укажите мне на любые веб-примеры или существующие вопросы об этом.

662 1

angular

1 ответ:

Comments

Ничего не найдено.

Yerkon · Accepted Answer · 2018-04-10 18:11:24

Итак, к вашим дочерним компонентам вы можете передать form и добавить/удалить элементы управления ему.

Шаблон родительского компонента
<form (ngSubmit)="onSubmit(form)" #form="ngForm">
        <a-comp [prop1]="name" [form]=form></a-comp>

      <button type="submit">Submit</button>
 </form>
Некоторый дочерний компонент:
// a comp
@Component({
  selector: 'a-comp',
  template: `
    <input [(ngModel)]="prop1"  name="name2" #myControl="ngModel"/>
    `

})
export class AComponent {
  @Input() form: NgForm;
  @Input() prop1 = 'Angular 5';

  @ViewChild('myControl') myControl: NgModel;

  ngOnInit() {
    //console.log(this.form, this.myControl);
    this.form.addControl(this.myControl);


  }
}
ПРИМЕР КОДА

Передача @Input чайлдсу не нужна. Но дочерние компоненты должны знать о form.

2. Самый простой способ . Используя силу DI

Дочерний компонент. В вашем случае UserDetails:
@Component({
  selector: 'a-comp',
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
  template: `
      <input [(ngModel)]="prop1"  name="prop1"/>
      <input [(ngModel)]="prop2"  name="prop2"/>
    `

})
export class AComponent {
  prop1 = 'Hello';
  prop2 = 'World';

  ngOnInit() { }
}
Как вы можете видеть в декораторах @Component, мы устанавливаем viewProviders. Поэтому, требуя ControlContainer, мы говорим useExisting: NgForm. По угловой системе DI он пойдет вверх, чтобы найти первого родителя NgForm.

ViewProviders = определяет набор видимых вводимых объектов к ее мнению дом дети.

...

Вы, возможно, можете спросить: по механизму DI он должен искать провайдера до корень, но почему он не поднимается в hirearchy и не находит родителя NgForm?

Constuctor of ngModel:
 constructor(@Optional() @Host() parent: ControlContainer,
              @Optional() @Self() @Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>,
              @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: Array<AsyncValidator|AsyncValidatorFn>,
              @Optional() @Self() @Inject(NG_VALUE_ACCESSOR)
              valueAccessors: ControlValueAccessor[]) {
...
Обратите внимание на @Optional() @Host() parent: ControlContainer. Это @Optional и @Host ().

@Host - указывает, что инжектор должен получить зависимость от любой инжектор до достижения ведущего элемента текущего компонента.

Итак, здесь @Host() декораторы ограничивают ngModel поиск только до host компонента, где ngModel выделяется.

NgModel конструктор
При таком подходе нет необходимости создавать привязку @Input в дочерних компонентах, чтобы получить родительские NgForm и добавить элементы управления NgModels вручную.
Пример Стакблица