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>

我想通过 one.Basically 将动态表单中的模板呈现为两列而不是一列我想定义放置在动态表单指令中的 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

Angular2 parse directive template ng-container

html

javascript

typescript

angular2-template

angular