Как интегрировать steelseries в проект Angular?

Я пытаюсь интегрировать steelseries в проект Angular. Следуя их примеру , мой код выглядит так: app.component.html:

      <!DOCTYPE html>
<html>
  <!-- <body (BeforeRender)="displayCanvas($event)"> -->
  <body >
    <div>
      <canvas id="myCanvas"></canvas>
    </div>

    <script src="C:\\ProiecteAngular\\Test\\TestDev\\node_modules\\steelseries\\srcdocs\\index.js"></script>
  </body>
</html>
<router-outlet></router-outlet>

app.component.ts:

      import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as steelseries from "steelseries";
import { Compass } from "steelseries";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
 // template: `<canvas #myCanvas></canvas>`
})
//export class AppComponent implements AfterViewInit {
export class AppComponent  {
  title = 'TestDev';
  // @ViewChild('myCanvas', { static: true })
  // myCanvas: ElementRef<HTMLCanvasElement>;

  displayCanvas(event) {
    const compass = new Compass(document.querySelector("myCanvas"), {
      size: 200
    });
  }
  // public context: CanvasRenderingContext2D;

  // ngAfterViewInit(): void {
  //   this.context = this.myCanvas.nativeElement.getContext('2d');
  //   const compass = new Compass(document.querySelector("myCanvas"), {
  //     size: 200
  //   });
  // }
}

С этим кодом на моей веб-странице ничего не отображается. Я думаю, что холст отображается неправильно. Я видел, что это можно сделать с помощью ViewChild. Я сделал несколько неудачных тестов (см. прокомментированный код из файла .ts). Что я упускаю или делаю неправильно? Заранее спасибо!

Источник

2 ответа

Во-первых, вам не нужно добавлять файл index.js в html.

пример

стакблиц

HTML

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

сценарий

      ngOnInit() {
  const compass = new Compass(document.querySelector('#myCanvas'), {
    size: 200,
  });
}
Источник
  1. вам не нужен тег скрипта в index.html. Вы импортируете js в файл app.component.ts.
  2. ты используешь document.querySelectorв displayCanvasфункция. Чтобы сделать эту работу, вам нужно будет префикс myCanvasс #за id лайк и добавление id="myCanvas"к HTML-тегу холста. (Это не то же самое, что просто #myCanvasкак атрибут в теге. См. рабочий пример здесь: https://stackblitz.com/edit/angular-ivy-gol2jx?file=src/app/app.component.html
    Но это не лучшая практика для angular, потому что вы не можете использовать это для несколько компонентов, потому что document.querySelector("#myCanvas")ищет идентификатор во всем HTML-документе и использует только первый. Чтобы сделать его более «угловым», вам понадобится, как вы уже упоминали ViewChild. Просто используйте const compass = new Compass(this.myCanvas.nativeElement, ... )
Источник
Другие вопросы по тегам