Question

我正在编写一个应用程序，该应用程序要根据当前幻灯片显示HTML5画布上绘制的不同形状。

因此，当应用程序加载时，我想初始化2张幻灯片，一张带有三角形，一张带有正方形，并能够使用Ionics离子幻灯片在它们之间滑动。

因此，在另一个组件中，我使用画布组件，如下所示，以创建三个选项卡：

 <ion-slides id='slides'>
    <ion-slide *ngFor='let index of [0,1]'>
      <customCanvas [index]='index'></customCanvas>
    </ion-slide>
  </ion-slides>

我的customCanvas.component.html仅包含一个画布，如：

<canvas id="canvas" width="300px" height="300px"></canvas>

customCanvas.component.ts将画布初始化为：

  ngOnInit() {
    this.canvas = <HTMLCanvasElement>document.getElementById('canvas');
    var context = this.canvas.getContext("2d");

    //use the context to draw either a triangle/square
  }

由于每个组件都有一个自己的画布，所以我期望我将以访问它们的方式获得两个不同的画布元素。但是，似乎总是得到当前显示的画布，而第一个形状被第二个覆盖。滑动到其他画布时，它只是空的默认画布。

任何有关如何访问“隐藏”画布的线索都将受到赞赏，并希望将滑块正确设置。

Answer 1

根据具有多个具有相同名称的id的浏览器标准是有效的，但是当您查询DOM时，它的工作方式将不同，它将始终返回ID的第一个匹配项。此处的问题是您正在使用canvas id来查询文档。在这里，您可以考虑将id更改为class选择器。

然后在查询DOM时，使用this.elementRef.nativeElement将其限制为特定组件。在进行任何类型的DOM操作之前，还请使用ngAfterViewInit生命周期来确保组件DOM存在。

constructor(private elementRef: ElementRef) {}

ngAfterViewInit() {
    // You could also use Renderer2 API for SSR and WebWorker support
    this.canvas = this.elementRef.nativeElement.getElementByClassName('canvas');
    var context = this.canvas.getContext("2d");

    //use the context to draw either a triangle/square
}

如何使用Ionics离子幻灯片在HTML5画布之间切换？

1 个答案: