how data binding works between ng-template and the context passed to the template using CreateEmbeddedView

问题

I have this template.

<ng-template #thumbnailTemplate let-context="thumbnailContext"> 

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

The following code create a view using the above template

  thumbnailTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef,
      {thumbnailContext: new ThumbnailContext(divId, 
        imgId,
        closeId,
        imageString,this.thumbnailContainerRef.length,null)});

and when deleteThumbnail is called and the context is passed to it, I am accessing the index property as follows

let index = thumbnailContext.thumbnailContext.index;

  deleteThumbnail(thumbnailContext:any){
    console.log("delete thumbnail  clicked with context ",JSON.stringify(thumbnailContext));
    let index = thumbnailContext.thumbnailContext.index; //note that thumbnailContext.index is undefined
    console.log("deleting index ", index);
    let wasConfirmed = confirm("Are you sure you want to delete the attachment?");
    if(wasConfirmed) {

      this.thumbnailContainerRef.remove(index);

      return false;
    }
  }

ThumbnailContext is

export class ThumbnailContext{
  constructor(public divId:string,
              public imgId: string,
              public closeId:string,
              public imgSrc:string,
              public index:number,
              public viewRefId:EmbeddedViewRef<ThumbnailContext>){} 
}

I am unable to understand what the type of context is let-context=thumbnailContext is in the ng-template

Is context it

{
thumbnailContext:{divId:.., imgId:..}
}

or is context

{
divId:.., imgId:..,
}

In the html it looks like it is the latter one because I am able to assign the values in the html as div id="{{context.divId}}but when then I unable to do context.index in deleteThumbnail? Why I had to do thumbnailContext.thumbnailContext.index?

回答1:

This is my understanding but it could be wrong so I am happy to accept other answers.

In templates, context information could be passed as an object and the passed object's key(s) will be available for binding by the local template let declarations.

eg, if the template is

<ng-template #myTemplate let-col let-foo="bar">
  <div>{{col}}</div>
  <div>{{foo}}</div>
</ng-template>

and if the object passed is myContext = {$implicit: 'World', bar: 'Svet'}; then col will be assigned the value World because it is assigned the $implicit key's value and foo is assigned value of bar key i.e. Svet

In my example if I use let-context="thumbnailContext" in the html then I need thumbnailContext key in the context object.

 {thumbnailContext: new ThumbnailContext(divId, //storing information about this thumbnail in the context of teh embedded view
          imgId,
          closeId,
          imageString,this.thumbnailContainerRef.length,null)}

then context becomes {divId:..., imgId:...} and I can use it as context.divId

alternatively I could have used let-context only along with $implicit

 $implicit: new ThumbnailContext(...)

Now this is the part I am unsure of but the following is my understanding.Note that context variable in let-context is a key/value, not an object itself. In the example below <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>, if the object passed is myContext = {$implicit: 'World', localSk: 'Svet'}; then name is World (the value)

So when I pass context to deleteThumbnail, I am passing a key/value i.e. thumbnail:{divId:..., imgId:...). Javascript wraps this inside an object i.e.

   {
   thumbnailContext:{divId:..., imgId:...}
   }

thus to access it inside deleteThumbnail, I'll have to do thumbnailContext.thumbnailContext.divId because the top level object (function argument) is called thumbnailContext

来源：https://stackoverflow.com/questions/57938593/how-data-binding-works-between-ng-template-and-the-context-passed-to-the-templat

标签

angular6