Javascript 组件内部的访问模板变量

我遇到了ng模板的问题

我们通过ngTemplateOutletContext传递一些参数，如下表组件中所示。根据单元中包含的数据类型，我们对单元使用不同的渲染器。请注意cellvalue参数，因为它是我所需要的

<ng-container *ngIf="useCellRenderer(column, row)">
   <ng-template [ngTemplateOutlet]="column.renderer.templateref" [ngTemplateOutletContext]="{ cellvalue: row[column.attr], rowvalue:row }">
   </ng-template>
</ng-container>

负责渲染的组件的模板如下所示：

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

{{GetTralateValue（cellvalue）}

模板能够访问cellvalue参数并正确调用函数，但我想从组件的TS访问相同的参数，但似乎无法做到这一点

到目前为止，我所尝试的内容与下面的代码片段大致相同

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

  ngAfterViewInit() {
    console.log('ngAfterViewInit', this.templateref.elementRef);
  }

@ViewChild（'templateRef'，{read:templateRef}）
公共templateref:templateref；
ngAfterViewInit（）{
log（'ngAfterViewInit'，this.templateref.elementRef）；
}

但是在console.log中找不到cellvalue

---

提前谢谢

好的，这不是一个答案，只是一个建议，所以如果它不起作用，请不要减去它

你试过那样的东西吗

html

我不确定它是否会起作用，因为像

#cellValue=“cellValue”

这样的构造只适用于在装饰符中有

exportAs

描述的指令

这是行不通的：

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

@ViewChild（'templateRef'，{read:templateRef}）
公共templateref:templateref；

因为它引用的是模板本身，而不是dom的生成部分。

---

也许可以尝试引用由模板生成的dom部分。

因此@SebOlens用他的话引导我找到了解决方案。我用exportAs创建了一个指令。该指令如下：

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  {{ getTraslateValue(cellvalue)}}
</ng-template>

TS

可通过以下方式在模板中使用，例如：

HTML

在我的例子中，指令init位于组件的

AfterViewInit

之后，因此如果您尝试初始化某些内容，您必须观察

ViewChild

变量的值，或者在我的例子中，我用

ngIf

激活了一个组件，并从模板中暴露了一个变量，这样我就可以使用新组件中的挂钩了

---

再次感谢@SebOlens:）

控制台中有任何错误，没有错误，只是无法访问我想要的数据。我会继续尝试。正如您所说，您的第一个解决方案将无法工作，因为它不是带有

exporAs

的指令。我尝试过这样访问并返回未定义的：HTML

test{{getTraslateValue（cellvalue）}

TS

@ViewChild（'test'，{read:TemplateRef}）public cellvalue:any；ngAfterViewInit（）{console.log（this.cellValue）；}

对于代码格式设置很抱歉：您总是可以使用exportAs生成一个指令，将cellValue分配给它，然后像我一样引用它。另外，不要读取非模板对象的TemplateRef，阅读ViewContainerRef或ElementRef。接下来我将尝试指令方法，并让您知道它是如何进行的。谢谢你的帮助，塞布！我很高兴它成功了：）别忘了对答案投赞成票，对不起，我忘了：）

@ViewChild('templateRef', { read: TemplateRef })
  public templateref: TemplateRef<any>;

@Directive({ selector: '[exposeVariable]', exportAs: 'exposed' })
export class ExposeVariableDirective {
  @Input() variablesToExpose: any;
  }
}

<ng-template #templateRef let-cellvalue="cellvalue" let-rowvalue="rowvalue">
  <div exposeVariable [variablesToExpose]="{cellValue: cellvalue}" #exposedRef="exposed">
    {{ getTraslateValue(cellvalue)}}
  </div>
</ng-template>

@ViewChild('exposedRef') public directiveExposed: any;