Question

我是angular2的新手，并通过引用此URL尝试使用动态表单及其字段生成。我得到了预期的表格。

由于动态表单组件使用ng-container逐个渲染字段，如下所示循环

<ng-container
        *ngFor="let field of config;"
        dynamicField
        [config]="field"
        [group]="form">
      </ng-container>

我正在使用表单模板，如下所示

<dynamic-form
        [config]="config"
        #form="dynamicForm"
        (submit)="submit($event)">
      </dynamic-form>

我想将动态表单中的模板呈现为两列而不是一个一个。基本上我想定义放置在dynamic-form指令中的html字段位置。例如

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

<ng-container>如何帮助替换我们在指令模板中给出的相应字段。或者建议使用动态表单组件动态地在定义的位置呈现html的最佳方法。

预期产量，

请告知

Answer 1

您可以创建将继续引用ViewContainerRef的指令。这样就可以将字段放在任何地方。

因此，让我们试着描述我们如何做到这一点。

首先，创建指令，如：

<强>动态外形场place.directive.ts

@Directive({
  selector: '[dynamic-form-placeId]'
})
export class DynamicFormFieldPlaceDirective {
  @Input('dynamic-form-placeId') placeId: string;

  constructor(public vcRef: ViewContainerRef) {}
}

该指令只需dynamic-form-placeId @Input，我们也会注入ViewContainer来获取对它的引用。正如您稍后将看到的，它将在Todd Motto提供的DynamicFieldDirective中使用。

之后我们为动态字段标记地点

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

然后修改

<强>动态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>

<强>动态form.component.ts

@ContentChildren(DynamicFormFieldPlaceDirective) places: 
                           QueryList<DynamicFormFieldPlaceDirective>;

containers = {};

ngAfterContentInit() {
  this.places.forEach(x => this.containers[x.placeId] = x.vcRef);
}

最后让我们修改DynamicFieldDirective

<强>动态field.directive.ts

@Input() container: ViewContainerRef;

ngOnInit() {
  ...
  const container = this.container || this.vcRef;
  ...
}

在前面的代码中，我使用了之前提供的ViewContainerRef。

如果您想查看已完成的代码，请打开

<强> Plunker Example

Angular2解析指令模板ng-container

1 个答案: