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>

在我的Component.ts中，我有：

@ContentChild(FnPhotoEditorCanvasDirective) canvas:HTMLCanvasElement;

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

<ng-content></ng-content>

我在画布上使用此指令来获取它的引用，因为仅使用@ContentChild（'canvas'）似乎不起作用。

@Directive({
   selector: '[fnPhotoEditorCanvas]',
})
export class FnPhotoEditorCanvasDirective { }

所以它的这段代码，我得到了对FnPhotoEditorCanvasDirective对象的引用，但是它不包含或表示画布对象。

我想念的是什么？

最佳答案

@ContentChild('canvas')仅在元素具有模板变量#canvas时有效

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

这个查询

@ContentChild(FnPhotoEditorCanvasDirective) canvas:HTMLCanvasElement;

将返回FnPhotoEditorCanvasDirective而不是HTMLCanvasElement的实例。

也许你想要

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

那么您可以像这样访问HTMLCanvasElement

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

另见angular 2 / typescript : get hold of an element in the template