ng-template和使用CreateEmbeddedView传递给模板的上下文之间的数据绑定如何工作

问题描述

我有这个模板.

<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)}); 

，当调用deleteThumbnail并将上下文传递给它时，我正在按如下方式访问index属性

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是

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

我无法理解ng-template

是context它

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

或者是context

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

在html中看起来像是后者，因为我能够将html中的值分配为div id="{{context.divId}}，但是什么时候无法在deleteThumbnail中执行context.index?为什么我必须做thumbnailContext.thumbnailContext.index?

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?

推荐答案

这是我的理解，但这可能是错误的，因此我很乐意接受其他答案.

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

在模板中，上下文信息可以作为对象传递，并且传递的对象的键将可由本地模板let声明进行绑定.

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.

例如，如果模板是

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

，如果传递的对象是myContext = {$implicit: 'World', bar: 'Svet'};，则将为col分配值World，因为为其分配了$implicit键的值，而为foo分配了bar键的值，即Svet

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

在我的示例中，如果我在html中使用let-context="thumbnailContext"，则需要在上下文对象中使用thumbnailContext键.

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)}

然后context变为{divId:..., imgId:...}，我可以将其用作context.divId

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

或者我只能将let-context和$implicit

 $implicit: new ThumbnailContext(...)

现在这是我不确定的部分，但以下是我的理解.请注意，let-context中的context变量是键/值，而不是对象本身.在下面的示例中<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>，如果传递的对象是 myContext = {$implicit: 'World', localSk: 'Svet'}; 那么name是World(值)

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)

因此，当我将context传递给deleteThumbnail时，我正在传递键/值，即thumbnail:{divId:..., imgId:...). Javascript将其包装在一个对象中，即

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:...}
   }

因此要在deleteThumbnail内部访问它，我将必须执行thumbnailContext.thumbnailContext.divId，因为 顶级对象(函数参数)称为thumbnailContext

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

这篇关于ng-template和使用CreateEmbeddedView传递给模板的上下文之间的数据绑定如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！