Question

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

在我的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（＆＃39; canvas＆＃39;）似乎不起作用。

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

所以它的代码，我得到一个FnPhotoEditorCanvasDirective对象的引用，但它不包含或代表一个canvas对象。

我失踪了什么？

Answer 1

仅当元素具有模板变量@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

如何在Angular2中使用ContentChild注释

1 个答案: