在Angular中创建复合组件 [英] Creating Composite Components in Angular

问题描述

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

I want to create a Angular generic composite component which is composed of bunch of input fields which could be used inside multiple components across application.

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

For Example: Consider a USER DETAIL component which has following Fields,

• 电子邮件-InputText字段
• 性别"单选按钮.
• 年龄组-下拉列表
• 说明-文本区域.

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

I want to include this USER DETAIL component in multiple components as below:

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

From Conventional wisdom I can say, that I just include <app-userdetails> in multiple components.

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

But how Do I Handle the submitted FormGroupData? I mean how do I get the data from UserDetail when its included in another component like CreateEmployee?

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

I am not sure if I explained the above scenario properly, please point me to any web-examples or existing questions about this.

推荐答案

因此，对于您的子组件，您可以将form和添加/删除控件传递给他.

So, to your child components you can pass form and add/remove controls to him.

父组件模板

<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.

Passing @Input to childs isn't necessary. But child components need to know about 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.

As you can see in @Component decorators we set viewProviders. So when requiring ControlContainer we say to useExisting: NgForm. By Angular DI system it will go up to find first parent NgForm.

ViewProviders =定义可见的可注射对象的集合 可以看到DOM子级.

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

...

您可能会问:通过DI机制，它应该搜索提供程序，直到 根，但是为什么它没有出现在等级制度中并找到父NgForm?

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?

构造器(ngModel:

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().

Pay attention to @Optional() @Host() parent: ControlContainer. It's @Optional and @Host().

@Host -指定注入器应从中检索依赖项 直到到达当前组件的宿主元素为止的所有喷射器.

@Host - Specifies that an injector should retrieve a dependency from any injector until reaching the host element of the current component.

因此，这里的@Host()装饰器将ngModel限制为仅搜索分配了ngModel的host组件.

So, here @Host() decorators restrics the ngModel to search only up to host component where ngModel is allocated.

NgModel构造函数

通过这种方法，无需在子组件中创建@Input绑定即可获取父NgForm并手动添加NgModels控件.

By this approach no need create @Input binding in child components to get parent NgForm and add NgModels controls manually.

StackBlitz示例

这篇关于在Angular中创建复合组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！