如何在 Angular 中使用模板引用动态呈现 ng-template答案

【问题标题】：How to render ng-template dynamically with Template Reference in Angular如何在 Angular 中使用模板引用动态呈现 ng-template
【发布时间】：2019-11-19 21:44:57
【问题描述】：

我尝试了这个问题Dynamic ngTemplateOutlet value 中的示例，但仍然没有成功。

我想根据用户选择的选项动态显示ng-template 表单。

我在 component.ts 中定义了全局变量和 3 个表单及其模板引用

@ViewChild('formA', {static: false}) formAref: TemplateRef<any>;
formA = new UserForm('formA', 'Mus Mauris Form', this.formAref);

@ViewChild('formB', {static: true}) formBref: TemplateRef<any>;
formB = new UserForm('formB', 'Vitae Purus Faucibus Form ', this.formBref);

@ViewChild('formC', {static: true}) formCref: TemplateRef<any>;
formC = new UserForm('formC', 'Aliquet Nec Form', this.formCref);


selectedForm: TemplateRef<any>;
totalForms: UserForm[] = [];

其中 UserForm 定义为

interface UserFormInterface {
  id: string;
  display: boolean;
  submitFunc: Function;
}

class UserForm implements UserFormInterface {
  id: string;
  form_name: string;
  display: boolean;
  submitFunc: Function;
  reference: TemplateRef<any>;

  constructor(id: string, form_name: string, reference: TemplateRef<any>) {
    this.id = id;
    this.form_name = form_name;
    this.reference = reference;
  }
}

在我的 HTML 模板中，我有以下内容

<div id="inner-form-dashboard" class="row">
      <div id="form-list" class="col-4">
          <div
               *ngFor="let form of totalForms" 
              class="form-item d-flex flex-column justify-content-around align-items-center">
              <div class="form-link" (click)="showForm(form)">{{form.form_name}}</div>
          </div>
      </div>
      <div id="form-container" class="col-8 d-flex flex-column justify-content-between">
          <div *ngFor="let form of totalForms">
              <ng-container *ngIf="form.display" style="display: block;">
                {{form.id}}
                  <div
                      *ngTemplateOutlet='selectedForm'>
                  </div>
              </ng-container>
          </div>  
      </div>
</div>

<ng-template #formA>
    <form>
        <div class="form-group">
            <label for="exampleFormControlInput1">Email address</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
        </div>
        <div class="form-group">
            <label for="exampleFormControlSelect1">Example select</label>
            <select class="form-control" id="exampleFormControlSelect1">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            </select>
        </div>
        <div class="form-group">
            <label for="exampleFormControlTextarea1">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
    </form>
</ng-template>

第一列col-4将根据左侧单击的项目确定在第二列col-8上显示哪个表单。

当我点击左边的项目时，我可以看到form.id显示在右侧，这意味着表格的选择和ngFor工作正常，但是@987654334线上的模板@ 不显示。

我的组件中的功能如下所示

showForm(form: UserForm): void {
    this.totalForms.forEach(f => f.display = false);
    form.display = true;
    this.selectedForm = form.reference;
    console.log(form);
    console.log('selected', this.selectedForm);
  }

https://stackblitz.com/edit/angular-34r1gw

https://angular-34r1gw.stackblitz.io

【问题讨论】：

标签： html angular forms ng-template ng-container

【解决方案1】：

问题的原因是您过早地尝试使用模板引用。 @ViewChild 属性和{ static: true } 最早可用的是ngOnInit 生命周期钩子：

ngOnInit() {
  this.formA = new UserForm('formA', 'Mus Mauris Form', this.formAref);
  this.formB = new UserForm('formB', 'Vitae Purus Faucibus Form ', this.formBref);
  this.formC = new UserForm('formC', 'Aliquet Nec Form', this.formCref);
  this.totalForms.push(this.formA, this.formB, this.formC);
}

当使用{ static: false } 时，@ViewChild 属性可用的最早是在ngAfterViewInit 生命周期钩子中。

StackBlitz Example

【讨论】：