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>

我想将动态表单内的模板呈现为两列而不是一列。基本上我想定义放置在动态表单指令内的 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 的引用的指令。这样就可以将字段放置在您想要的任何位置。

让我们试着描述一下我们如何做到这一点。

首先，创建如下指令：

dynamic-form-field-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>

然后修改

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

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

containers = {};

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

最后让我们修改DynamicFieldDirective

dynamic-field.directive.ts

@Input() container: ViewContainerRef;

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

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

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

Plunker Example