代码之家 › 专栏 › 技术社区 › Manu Chadha

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

angular6

0

Manu Chadha · 技术社区 · 5 年前

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

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 ?

0 回复 | 直到 5 年前

1

0

Manu Chadha 5 年前

我对如何 let- 指令工作不正确。当我写作时 let-something="context" 然后 context 是传递给模板的对象中的键。此键的值在以下情况下可用 something 在模板中。

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

如果传递的对象是{$implicite:“World”,bar:“Svet”};然后 col 将被赋予该值 {world} 因为它被分配了 $隐含 价值。 foo 为bar赋值,即。 Svet 因为 foo 等于密钥 bar 传递的对象和 酒吧 的值为 斯维特 .

对于 let-col 上下文属性 $隐含 可用作 科尔 在绑定模板内,即angular正在创建对象 {col:'World'} 这使得代码等同于 let-col="col" 所以 科尔 映射到密钥 科尔 其值为 world .

所以,如果我使用 let-mycontext="context" 在html中,我需要 上下文 传递对象中的属性,在我的例子中就是这样。我正在传递物体 ThumbnailContext 它有一把钥匙 上下文

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

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

就像我一样 图像上下文 在模板中可用,我正在将其传递给 deleteThumbnail ,我也得换衣服 删除缩略图 deleteThumbnail(thumbnailContext: ImageContext) {...