Question

我想在角度中使用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（＆＃39; 2d＆＃39;）它不是一个函数。如果我试图把.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 长度：1 0：canvas＃canvas proto ：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');

我怎样才能获得棱角分明的原生元素？真正的孩子？

1 个答案: