我想创建一个Angular
通用复合组件,它由一堆输入字段组成,可以跨应用程序在多个组件中使用。
例如: 考虑一个USER DETAIL组件,其中包含以下字段
我想将此USER DETAIL
组件包含在多个组件中,如下所示:
从传统观点我可以说,我只是将<app-userdetails>
包含在多个组件中。
但我如何处理提交的FormGroupData
?
我的意思是,当UserDetail
包含在CreateEmployee
等其他组件中时,如何从xlsxwriter
获取数据?
我不确定我是否正确解释了上述情况,请指出任何网络示例或现有问题。
答案 0 :(得分:4)
因此,对于您的子组件,您可以将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
说。通过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
绑定来获取父@Input
并手动添加NgModels控件。