Angular6 无法在EmbeddedView中正确访问上下文对象
在我的应用程序中,我正在创建一个嵌入式视图,并向其传递一个上下文Angular6 无法在EmbeddedView中正确访问上下文对象,angular6,Angular6,在我的应用程序中,我正在创建一个嵌入式视图,并向其传递一个上下文 thumbnailTemplateRef:TemplateRef<ThumbnailContext>; ... let thumbnailContext = new ThumbnailContext(divId, buttonId, imgId, closeId, imageString,this.thumbnailContainerRef.length,null); console.log("sa
thumbnailTemplateRef:TemplateRef<ThumbnailContext>;
...
let thumbnailContext = new ThumbnailContext(divId,
buttonId,
imgId,
closeId,
imageString,this.thumbnailContainerRef.length,null);
console.log("saving image context ",thumbnailContext);
thumbnailTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef, thumbnailContext);
但我在执行过程中遇到以下错误
无法读取与html代码相对应的未定义的属性“divId”
这里我做错了什么?指的是,如果我想访问ThumbnailContext
对象中的context
变量,我首先需要在ThumbnailContext
对象中有一个context
键,然后使用let context=“context”
。因此,我将代码更改为以下内容
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){}
}
@ViewChild("thumbnailTemplate",{read:TemplateRef})
thumbnailTemplateRef:TemplateRef<ThumbnailContext>;
let thumbnailContext = new ThumbnailContext(new ImageContext(divId,
buttonId,
imgId,
closeId,
imageString,this.thumbnailContainerRef.length,null));
thumbnailTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef, thumbnailContext);
<ng-template #thumbnailTemplate let-context="context"> <!-- thumbnailContext is the name of the variable passed to createEmbeddedView. Check .ts file-->
<div id="{{context.divId}}">
<button id="{{context.buttonId}}" type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/>
</button>
导出类ImageContext{
构造函数(public divId:string,
公共按钮ID:string,
公共imgId:string,
public closeId:string,
公共imgSrc:string,
公开索引:编号:,
public viewRefId:EmbeddedViewRef){}//TODOM-不确定类型是否正确
}
导出类ThumbnailContext{
构造函数(公共上下文:ImageContext){}
}
@ViewChild(“thumbnailTemplate”,{read:TemplateRef})
thumbnailTemplateRef:TemplateRef;
让thumbnailContext=新的thumbnailContext(新的ImageContext(divId,
buttonId,
伊姆吉德,
亲密的,
imageString,this.thumbnailContainerRef.length,null));
thumbnailTemplateViewRef=this.thumbnailContainerRef.CreateMbeddedView(this.thumbnailTemplateRef,thumbnailContext);
ThumbnailContext {divId: "thumbnail-1", buttonId: "thumbnail-button-1", imgId: "img-1", closeId: "close-button-1", imgSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYA…7Jj8HyDnRt/ePaJ5eXn8Azv0jA3o5lvcAAAAASUVORK5CYII=", …}
buttonId: "thumbnail-button-1"
closeId: "close-button-1"
divId: "thumbnail-1"
imgId: "img-1"
imgSrc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABVYA"
index: 0
viewRefId: null
__proto__: Object
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){}
}
@ViewChild("thumbnailTemplate",{read:TemplateRef})
thumbnailTemplateRef:TemplateRef<ThumbnailContext>;
let thumbnailContext = new ThumbnailContext(new ImageContext(divId,
buttonId,
imgId,
closeId,
imageString,this.thumbnailContainerRef.length,null));
thumbnailTemplateViewRef = this.thumbnailContainerRef.createEmbeddedView(this.thumbnailTemplateRef, thumbnailContext);
<ng-template #thumbnailTemplate let-context="context"> <!-- thumbnailContext is the name of the variable passed to createEmbeddedView. Check .ts file-->
<div id="{{context.divId}}">
<button id="{{context.buttonId}}" type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/>
</button>