[英]Angular2 parse directive template ng-container
I am new to angular2 and tried with dynamic form and its field generation by referring this URL . 我是angular2的新手,并通过引用此URL尝试使用动态表单及其字段生成。 And i got the form as expected. 我得到了预期的表格。
Since the dynamic form component render the field one by one using ng-container as shown below by loop it 由于动态表单组件使用ng-container逐个渲染字段,如下所示循环它
<ng-container
*ngFor="let field of config;"
dynamicField
[config]="field"
[group]="form">
</ng-container>
I am using the form template as shown below 我正在使用表单模板,如下所示
<dynamic-form
[config]="config"
#form="dynamicForm"
(submit)="submit($event)">
</dynamic-form>
I want to render the template inside dynamic-form as two column not one by one.Basically i want to define the html field position placing inside dynamic-form directive. 我想将动态表单中的模板呈现为两列而不是一个一个。基本上我想定义放置在dynamic-form指令中的html字段位置。 For example 例如
<dynamic-form
[config]="config"
#form="dynamicForm"
(submit)="submit($event)">
<div class="clearfix">
<div class="col-md-6 col-sm-6" id="FIRST_NAME"></div>
<div class="col-md-6 col-sm-6" id="LAST_NAME"></div>
</div>
</dynamic-form>
How <ng-container>
could help to replace the respective field which we given in our directive template. <ng-container>
如何帮助替换我们在指令模板中给出的相应字段。 Or Suggest best way to render html in defined position dynamically using dynamic-form component. 或者建议使用动态表单组件动态地在定义的位置呈现html的最佳方法。
Please advise 请指教
You can create directive that will keep reference to ViewContainerRef
. 您可以创建将继续引用ViewContainerRef
指令。 This way it will be possible to place the field wherever you want. 这样就可以将字段放在任何地方。
So let's try to describe how we can do that. 所以让我们试着描述一下我们如何做到这一点。
First, create directive like: 首先,创建指令如:
dynamic-form-field-place.directive.ts 动态外形场place.directive.ts
@Directive({
selector: '[dynamic-form-placeId]'
})
export class DynamicFormFieldPlaceDirective {
@Input('dynamic-form-placeId') placeId: string;
constructor(public vcRef: ViewContainerRef) {}
}
The directive just takes dynamic-form-placeId
@Input
and we also inject ViewContainer
to get hold reference to it. 该指令只需要使用dynamic-form-placeId
@Input
,我们也会注入ViewContainer
来获取它的引用。 As you will see later it will be used in DynamicFieldDirective
provided by Todd Motto. 正如您稍后将看到的,它将在Todd Motto提供的DynamicFieldDirective
使用。
After that we mark places for our dynamic fields 之后,我们为动态字段标记位置
<dynamic-form
[config]="config"
#form="dynamicForm"
(submit)="submit($event)">
<div class="row">
<div class="col-md-6 col-sm-6">
<ng-container dynamic-form-placeId="FirstName"></ng-container>
</div>
<div class="col-md-6 col-sm-6">
<ng-container dynamic-form-placeId="LastName"></ng-container>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<ng-container dynamic-form-placeId="Gender"></ng-container>
</div>
<div class="col-md-6 col-sm-6">
<ng-container dynamic-form-placeId="Food"></ng-container>
</div>
</div>
</dynamic-form>
then modify 然后修改
dynamic-form.component.html 动态form.component.html
<form
class="dynamic-form"
[formGroup]="form"
(submit)="handleSubmit($event)">
<ng-content></ng-content> // we transclude markup
<ng-container
*ngFor="let field of config;"
dynamicField
[container]="containers[field.name]" // and pass viewContainerRef
[config]="field"
[group]="form">
</ng-container>
</form>
dynamic-form.component.ts 动态form.component.ts
@ContentChildren(DynamicFormFieldPlaceDirective) places:
QueryList<DynamicFormFieldPlaceDirective>;
containers = {};
ngAfterContentInit() {
this.places.forEach(x => this.containers[x.placeId] = x.vcRef);
}
And finally let's modify DynamicFieldDirective
最后让我们修改DynamicFieldDirective
dynamic-field.directive.ts 动态field.directive.ts
@Input() container: ViewContainerRef;
ngOnInit() {
...
const container = this.container || this.vcRef;
...
}
In the preceding code i use ViewContainerRef
that was provided by us earlier. 在上面的代码中,我使用了之前提供的ViewContainerRef
。
If you want to look at completed code just open 如果你想查看已完成的代码,请打开
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.