angular - 在 Angular 中创建复合组件

Question

我想创建一个 Angular通用复合组件，由一堆输入字段组成，可以跨应用程序在多个组件内使用。

例如:考虑具有以下字段的 USER DETAIL 组件，

• 电子邮件 - 输入文本字段
• 性别单选按钮。
• 年龄组 - 下拉菜单
• 描述 - 文本区域。

我想包括这个 USER DETAIL多个组件中的组件如下:

根据传统智慧，我可以说，我只包括 <app-userdetails>在多个组件中。

但是我该如何处理提交的 FormGroupData ？我的意思是如何从 UserDetail 获取数据当它包含在另一个组件中时，如 CreateEmployee ？

我不确定我是否正确解释了上述情况，请指出任何网络示例或与此相关的现有问题。

Answer 1

因此，对于您的子组件，您可以将 form 和 add/remove 控件传递给他。

父组件模板

<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);


  }
}

CODE EXAMPLE

将 @Input 传递给 child 是没有必要的。但是子组件需要了解 form。

<强>2。最简单的方法。通过使用 DI

的力量

子组件。在您的情况下，用户详细信息:

@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。通过 Angular DI 系统，它将向上寻找第一个父级 NgForm。

ViewProviders = Defines the set of injectable objects that are visible to its view DOM children.

...

You maybe can ask: By DI mechanism it should search provider up to root, but why it doesn't go up in hirearchy and find parent NgForm?

Constuctor 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 - Specifies that an injector should retrieve a dependency from any injector until reaching the host element of the current component.

因此，这里的 @Host() 装饰器限制 ngModel 仅搜索 host 组件，其中 ngModel 已分配。

NgModel constructor

通过这种方法，无需在子组件中创建 @Input 绑定(bind)来获取父级 NgForm 并手动添加 NgModels 控件。

StackBlitz EXAMPLE