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屋!