以角度

Question

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

例如： 考虑一个USER DETAIL组件，其中包含以下字段

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

我想将此USER DETAIL组件包含在多个组件中，如下所示：

从传统观点我可以说，我只是将<app-userdetails>包含在多个组件中。

但我如何处理提交的FormGroupData？ 我的意思是，当UserDetail包含在CreateEmployee等其他组件中时，如何从xlsxwriter获取数据？

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

Answer 1

因此，对于您的子组件，您可以将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);


  }
}

CODE EXAMPLE

没有必要将@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说。通过Angular DI系统，它将找到第一个父NgForm。

  

ViewProviders =定义可见的可注入对象集   它的观点是DOM儿童。

...

  

您可以问：通过DI机制，它应该搜索提供商   root，但是为什么它不会出现在雇佣关系中并找到父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 - 指定注入器应从中检索依赖项   任何进样器，直到到达当前组件的主机元素。

因此，此处@Host()装饰器会重新调整ngModel，以便仅搜索分配了host的{​​{1}}组件。

NgModel constructor

通过这种方法，不需要在子组件中创建ngModel绑定来获取父@Input并手动添加NgModels控件。

StackBlitz EXAMPLE