javascript - 我怎样才能获得 Angular 原生元素真正的 child ？

Question

我想在 Angular 中使用 Canvas 元素。所以我的 HTML 文件如下所示:

<canvas id="canvas" myCanvas></canvas>

我尝试使用 .nativeElement 来获取它。像这样:

@Directive({ selector: '[myCanvas]' })

export class DrawComponent implements OnInit {

  cx;
  constructor(private el: ElementRef) {
    console.log(el.nativeElement)
    this.cx = el.nativeElement.getContext('2d');
   }

有了它我就有了一个双 HTML 标签:

<app-draw _nghost-c1>
   <canvas _ngcontent-c1="" id="canvas" mycanvas=""></canvas>
</app-draw>

它告诉 .getContext('2d') 它不是一个函数。如果我尝试将 .nativeElement 放在 .children 选择器之后，如下所示:

@Directive({ selector: '[myCanvas]' })

export class DrawComponent implements OnInit {

  cx;
  constructor(private el: ElementRef) {
    console.log(el.nativeElement.children)
    this.cx = el.nativeElement.children.getContext('2d');
   }

我有一个列表:

[] Canvas : Canvas #canvas长度:10: Canvas # Canvas 原型(prototype):HTMLCollection

与 .getContext 函数的结果相同。我该如何正确使用它？

Answer 1

我刚刚测试过:

@Directive({ selector: '[myCanvas]' })
export class DrawComponent implements OnInit {
   ...
  constructor(private el: ElementRef) {
  }
  ngOnInit() {
     this.cx = el.nativeElement.querySelector("canvas").getContext('2d');
  }

children 是一个数组，因此您必须指定索引，但更好的是选择元素，因为索引可以更改

...querySelector("canvas").getContext('2d');