创建 EmbeddedView 时获取不同的上下文变量

Question

在这段代码中，我创建了一个嵌入式视图并传递了一个上下文。嵌入的视图是图像缩略图

const thumbnailContext = new ThumbnailContext(new ImageContext(divId,
      buttonId,
      imgId,
      closeId,
      imageString, this.thumbnailContainerRef.length, null));
    // viewref is empty  now. It will contain reference of this created view (see below)
    console.log('uploading context ',thumbnailContext);
thumbnailTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef, thumbnailContext);

classes定义如下

export class ImageContext {
  constructor(public divId: string,
              public buttonId: string,
              public imgId: string,
              public closeId: string,
              public imgSrc: string,
              public index: number,
              public viewRefId: EmbeddedViewRef<ThumbnailContext>) {} //TODOM - not sure if the types are correct
}
export class ThumbnailContext {
  constructor(public context: ImageContext) {}
}

根据我的控制台打印是正确的

ThumbnailContext {context: ImageContext}
context: ImageContext
divId: "thumbnail-1"
buttonId: "thumbnail-button-1"
imgId: "img-1"
closeId: "close-button-1"
imgSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjUA"
index: 0
viewRefId: null

视图嵌入此处

<ng-template #thumbnailTemplate let-context="context"> 
    <div id="{{context.divId}}"> 
      <img id="{{context.imgId}}" src="{{context.imgSrc}}"> 
      <a href="javascript:void(0)" id="{{context.closeId}}" (click)="this.deleteThumbnail(context)"></a> 
    </div>
  </ng-template>

图像创建正确。但是当我尝试使用 deleteThumbnail 删除它们并将上下文传回给它时，我得到了一个不正确的上下文

deleteThumbnail(thumbnailContext: ThumbnailContext) {
     console.log("delete thumbnail  clicked with context ",JSON.stringify(thumbnailContext));
    const index = thumbnailContext.context.index; //I get error Cannot read property 'index' of undefined here
  ..
}

delete thumbnail  clicked with context  {"divId":"thumbnail-1","buttonId":"thumbnail-button-1","imgId":"img-1","closeId":"close-button-1","imgSrc":"..."}

我想我应该在 {context:{"divId":"thumbnail-1","buttonId":"thumbnail-button-1","imgId":"img-1","closeId":"close-button-1","imgSrc":"}}

中得到一个带有上下文对象的对象

我怀疑在 let-context="context" 中，上下文变量被映射到 Thumbnail class 的 context 属性。是正确的吗？

export class ThumbnailContext {
  constructor(public context: ImageContext) {}
}

如何将传递的上下文映射到 ThumbnailContext？

Answer 1

我对 let- 指令如何工作的理解不正确。当我写 let-something="context" 时，context 是传递给模板的对象中的键。此键的值在模板中变为可用的 something。

从 SO 的其他答案中挑选，有两种方法可以将上下文传递给 ng-template。给 Angular 的 $implicit 赋值，或者在对象中创建一个新的 key 并引用那个 key 如果您添加模板

如果传递的对象是{$implicit:'World',bar:'Svet'}；那么 col 将被赋予值 {world} 因为它被赋予了 $implicit 值。 foo 被赋予了 bar 的值，即 Svet 因为 foo 等于传递对象的键 bar 而 bar 的值为 Svet.

对于 let-col 上下文属性 $implicit 在绑定模板中作为 col 可用，即 angular 正在创建一个对象 {col:'World'} 这使得代码等同于 let-col="col"。所以 col 映射到值为 world.

的键 col

因此，如果我在 html 中使用 let-mycontext="context"，那么我需要在传递的对象中使用 context 属性，这在我的例子中是存在的。我传递的对象 ThumbnailContext 有一个键 context

export class ThumbnailContext { constructor(public context: ImageContext) {} }

所以模板中的mycontext实际上是ImageContext，它是模板中的本地名称。

由于模板中有 ImageContext，我将其传递给 deleteThumbnail，因此我还必须更改 deleteThumbnail deleteThumbnail(thumbnailContext: ImageContext) {...

创建 EmbeddedView 时获取不同的上下文变量

getting a different context variable when creating EmbeddedView

angular6