ng-template 和使用 CreateEmbeddedView 传递给模板的上下文之间的数据绑定是如何工作的 [英] how data binding works between ng-template and the context passed to the template using CreateEmbeddedView

问题描述

我有这个模板.

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

</ng-模板>

以下代码使用上述模板创建视图

 thumbTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef,{thumbnailContext: new ThumbnailContext(divId,图片编号，关闭ID，imageString,this.thumbnailContainerRef.length,null)});

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

let index = thumbContext.thumbnailContext.index;

 deleteThumbnail(thumbnailContext:any){console.log("删除点击上下文的缩略图",JSON.stringify(thumbnailContext));让索引=thumbnailContext.thumbnailContext.index;//注意thumbnailContext.index是未定义的console.log("删除索引", index);let wasConfirmed = confirm("您确定要删除附件吗?");如果(已确认){this.thumbnailContainerRef.remove(index);返回假；}}

ThumbnailContext 是

导出类 ThumbnailContext{构造函数(公共divId:字符串，公共 imgId:字符串，公共 closeId:string,公共 imgSrc:字符串，公共索引:编号，public viewRefId:EmbeddedViewRef){}}

我无法理解 context 的类型是什么 let-context=thumbnailContext 在 ng-template

是context是吗

<代码>{缩略图上下文:{divId:.., imgId:..}}

或者是context

<代码>{divId:.., imgId:..,}

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

解决方案

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

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

例如，如果模板是

<div>{{col}}</div><div>{{foo}}</div></ng-模板>

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

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

 {thumbnailContext: new ThumbnailContext(divId,//在嵌入视图的上下文中存储有关此缩略图的信息图片编号，关闭ID，imageString,this.thumbnailContainerRef.length,null)}

然后 context 变成 {divId:..., imgId:...} 我可以用它作为 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(值)

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

<代码> {缩略图上下文:{divId:...，imgId:...}}

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

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?

解决方案

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

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