如何使用 Angular 中的模板参考动态渲染 ng-template

Question

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

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

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

@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显示在右侧，这意味着forms和ngFor的选择工作正常，但是，在线模板*ngTemplateOutlet='selectedForm'>不显示。

我的组件中的功能看起来像这样

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

Answer 1

问题的原因是您过早地尝试使用模板引用。 最早可以使用{ static: true }的@ViewChild属性是在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 示例