Как переключаться между холстами HTML5 с помощью ионных слайдов Ionics?

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

В соответствии со стандартами браузера, имеющими несколько идентификаторов с одинаковым именем, допустимо, но оно не будет работать одинаково при запросе DOM, оно всегда будет возвращать 1-е вхождение ID.Проблема здесь в том, что вы запрашиваете документ, используя canvas id.Здесь вы можете изменить id на class селектор.

А затем, при запросе DOM, ограничить его конкретным компонентом, используя this.elementRef.nativeElement.Также используйте ngAfterViewInit жизненный цикл, чтобы убедиться, что компонент DOM существует, прежде чем выполнять какие-либо манипуляции с 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
}