创建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);

这些类的定义如下

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"中，上下文变量被映射到context类的Thumbnail属性。是正确的吗？

export class ThumbnailContext {
  constructor(public context: ImageContext) {}
}
如何使传递的上下文映射到ThumbnailContext？

在这段代码中，我正在创建一个嵌入式视图并传递一个上下文。嵌入的视图是图像缩略图const thumbnailContext = new ThumbnailContext（new ImageContext（divId，...

Answer 1

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