时间戳

首页 > 解决方案 > 获取我的组件已在其中呈现的模板的上下文

angular - 获取我的组件已在其中呈现的模板的上下文

问题描述

问题很简单，我有这个（嗯......不是这个，而是逻辑上相似的东西）：

<many-items [Items]="items">
    <ng-template #itemTemplate let-item>
        <single-item>{{item.prop1}}</single-item>
        <single-item>{{item.prop2}}</single-item>
        <single-item>{{item.prop3}}</single-item>
        <single-item>{{item.prop4}}</single-item>
        <single-item>{{item.prop5}}</single-item>
    </ng-template>
</my-component>

从内部<single-item>我希望能够访问item实例，而不必将其传递给每个<single-item>组件，也就是，不是这个：

...
<single-item [Context]="item">{{item.prop1}}</single-item>
...

使用 View Engine，我正在做：

ngAfterViewInit() {
    this.Context = (<any>this._viewContainer)._view.context.$implicit;
}

Angular Ivy 打破了这一点（我意识到这_view对我来说是一种内在的耻辱，但是¯\__(ツ)_/¯）现在我正在使用这个：

ngAfterViewInit() {
   this.Context = (<any>this._viewContainer)._hostView.debug.context.$implicit;
}

这对我的眼睛来说有点太老套了，如果我正在使用它甚至都不起作用，enableProdMode();所以我想知道我是否有一种非老套的方式来检索我需要的东西。

谢谢！

标签： angular

解决方案

所以显然debug变量 in(<any>this._viewContainer)._hostView实际上是使用_hostView的属性生成的，以便在调试期间更具可读性

这意味着，通过窥视_hostView本身，这是一个数组，我可以找到我正在寻找的东西。

由于我很懒惰，只想在这一点上完成，我将找到该数组的第一个属性，其中包含如下$implicit属性：

(<any>this._viewContainer)._hostView.find(t => t && !!t.$implicit).$implicit

这将是我的上下文，它将在开发和生产模式下检索。耶。

在这里希望有更好的方法来做到这一点

推荐阅读