Question

我有一个组成部分。它已加载到另一个组件中。我要单击第一个组件，然后在第二个组件的画布上启动一个动作。但是，我得到“无法读取未定义的属性'nativeElement'”，我认为这是因为它在组件ts文件之外。

如何将它们集成在一起？

组件A嵌套在组件B中。
单击组件A，在组件B中的画布上调用一个动作。
Canvas抛出无法读取的未定义属性'nativeElement'。

我想在组件B中启动画布时单击组件A的代码：

import { Component, ViewChild, ElementRef } from '@angular/core'

@Component({
  selector: 'MouseComponent',
  templateUrl: './mouse.html',
  styleUrls: ['./mouse.scss']
})

export class MouseComponent {

@ViewChild('canvas_element') canvas_element: ElementRef;

clickie(){

  let ctx: CanvasRenderingContext2D = this.canvas_element.nativeElement.getContext('2d');

  ctx.canvas.addEventListener('mousemove', function(event){
    var mouseX = event.clientX - ctx.canvas.offsetLeft;
    var mouseY = event.clientY - ctx.canvas.offsetTop;
    var status = document.getElementById('status');
    status.innerHTML = mouseX + ' | ' + mouseY;
  });

  ctx.canvas.addEventListener('click', function (event) {

    var mouseX = event.clientX - ctx.canvas.offsetLeft;
    var mouseY = event.clientY - ctx.canvas.offsetTop;
    console.log('Mouse Click At:', mouseX + ' | ' + mouseY);
  });

}
}

组件B html（除了标准文件外，TS文件中没有其他内容）：

<div container-fluid>
  <div class='row'>
    <div class='col-md-3 sidebar-container'>
        <div class='col-md-2 action-bar'>
          <MouseComponent></MouseComponent>
        </div>
        <div class='col-md-12 top-bar'></div>
    </div>

    <div class='col-md-9 canvas-container' style="text-align:center;">
       <canvas #canvas_element class='write-canvas'></canvas>
       <p>Status:</p>
       <p id='status'></p>
    </div>
  </div>
</div>

我绝不是2级专家，但可以肯定，单击时触发画布动作并不难吗？

Answer 1

使用@ContentChild代替@ViewChild。该画布位于您的阴影DOM（嵌套组件主体）中，而不位于轻型DOM（组件主体）中。

@编辑抱歉，我意识到它们彼此相邻，而不是嵌套在一起。在这种情况下，您可能需要将#canvas_element的{{1}}传递给邻居组件。

无法读取未定义组件的属性“ nativeElement”

1 个答案: