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