Angular2解析指令模板ng-container

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