получить другую переменную контекста при создании 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?

Answer 1

Мое понимание того, как работают директивы let-, было неверным. Когда я пишу let-something="context", тогда context - это ключ в объекте, передаваемом в шаблон. Значение этого ключа становится доступным как something в шаблоне.

При выборе другого ответа SO, есть два способа передать контекст в ng-template. Либо присвойте значение Angular $implicit или создайте новый key в объекте и обратитесь к этому key, если вы добавите шаблон

{{col}} {{ foo}}

Если переданный объект является {$ implicit: 'World', bar: 'Svet'}; тогда col будет присвоено значение {world}, поскольку ему присвоено значение $implicit. foo присваивается значение бара, т.е. Svet, поскольку foo равно ключу bar переданного объекта, а значение bar равно Svet.

для let-col свойство контекста $implicit доступно как col в шаблоне для привязок, т.е. angular создает объект {col:'World'}, который делает код эквивалентным let-col="col". Так что col отображается на ключ col, значение которого world.

Так что, если я использую let-mycontext="context" в html, тогда мне нужно свойство context в переданном объекте, который находится в мое дело. Я передаю объект ThumbnailContext, который имеет ключ context

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

Так что mycontext внутри шаблона на самом деле ImageContext и это локальное имя в шаблоне.

Как У меня ImageContext доступно в шаблоне, и я передаю его deleteThumbnail, мне также пришлось изменить deleteThumbnail deleteThumbnail(thumbnailContext: ImageContext) {...