Javascript 如何在Angular2中使用ContentChild注释

我尝试创建自己的组件，该组件需要引用用户定义的子元素

在我的html模板中，我有以下内容：

<fn-photo-editor fxLayout="row" fxLayoutGap="20px" class="coloredContainerX box">
    <div fxFlex.gt-sm="80" fxFlex="33" fxLayout="row" fxLayoutAlign="center center">
          <canvas fnPhotoEditorCanvas height="1080px" width="1920px" fxFlex dropzone="copy"></canvas>
    </div>
</fn-photo-editor>

@ContentChild(FnPhotoEditorCanvasDirective) canvas:HTMLCanvasElement;

在我的组件模板中，只需：

<ng-content></ng-content>

这段代码，我得到了一个对FnPotoEditorCanvasDirective对象的引用，但它不包含或表示画布对象

我错过了什么

@ContentChild（'canvas'）

仅当元素具有模板变量

#canvas

<canvas #canvas fnPhotoEditorCanvas height="1080px" width="1920px" fxFlex dropzone="copy"></canvas>

将返回

FnPotoEditorCanvasDirective

的实例，而不是

HTMLCanvasElement

也许你想要

@ContentChild(FnPhotoEditorCanvasDirective, {read: ElementRef}) canvas:HTMLCanvasElement;

然后您可以访问

HTMLCanvasElement

like

ngAfterContentInit() {
  this.canvas.nativeElement...
}

另见

@ContentChild(FnPhotoEditorCanvasDirective, {read: ElementRef}) canvas:HTMLCanvasElement;

ngAfterContentInit() {
  this.canvas.nativeElement...
}