Question

所以我有以下代码：

  <StackLayout formArrayName="products" *ngFor="let product of form.requestProduct.get('products')['controls']; let j=index">
    <ng-container *ngTemplateOutlet="getTemplate(product.get('code'))">

    </ng-container>
  </StackLayout>

getTemplate（）实现：

  getTemplate(control: FormControl): string {
    return 'usernameTemplate';
  }

运行此命令会引发错误：

错误TypeError：templateRef.createEmbeddedView不是函数

现在如何根据给定函数的返回值使ngTemplateOutlet的值动态化？

谢谢！

Answer 1

我不认为简单地返回模板名称即可完成工作。
您还需要将模板附加到容器。

所以，这是我的方法：

在您的视图中添加一些<ng-template>（其顺序很重要）

<!-- awesome-component.component.html -->
<div *ngFor="let p of products">
 <div (click)="changeProductTemplate(p)">{{ p?.name }}</div>
</div>

<ng-container #cont></ng-container>

<!-- The order is important! -->
<ng-template #code1 let-product>content2..</ng-template>
<ng-template #code2 let-product>content2..</ng-template>
<ng-template #code3 let-product>content2..</ng-template>

使用@ViewChildren

// awesome-component.component.ts
@ViewChildren(TemplateRef) templates: QueryList<TemplateRef<any>>
@ViewChild('cont', {read: ViewContainerRef, static: false}) cont: ViewContainerRef;

每次选择产品时，都会使用其中一个模板，具体取决于product code。

 // awesome-component.component.ts

 private templatesProductsMap = {
   code1: 1,
   code2: 2,
   code3: 3,
 };

 changeProductTemplate (product) {
   const tempIndex = this.getTemplateByProductCode(product.code);

   this.instantiateTemplate(tempIndex, { $implicit: product });
 }

 private getTemplateByProductCode (productCode) {
   return this.templatesProductsMap[productCode];
 }

 private instantiateTemplate (idx = 0, templateContext = {}) {
   this.cont.clear();

   const temp = this.templates.toArray()[idx];    
   this.cont.createEmbeddedView(temp, templateContext)

   this.cd.detectChanges();
 }

Here是实现。

如何为ngTemplateOutput分配函数返回值？

1 个答案: