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

Question

我尝试了这个问题中的示例 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[] = [];

其中用户窗体定义为

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 工作正常，但是， *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

问题的原因是您试图过早地使用模板引用。 @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

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

How to render ng-template dynamically with Template Reference in Angular

html

forms

ng-template

angular

ng-container