如何在Angular项目中集成steelseries？

Question

我正在尝试集成 steelseries in an Angular project. Following their example，我的代码如下所示： 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
  //   });
  // }
}

使用此代码，我的网页上不会显示任何内容。我的想法是 canvas 没有正确呈现。我已经看到这可以使用 ViewChild 来完成。我做了一些不成功的测试（请参阅 .ts 文件中的注释代码）。我错过了什么或做错了什么？提前致谢！

Answer 1

首先，您不需要将 index.js 文件添加到 html。

例子

stakblitz

html

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

脚本

ngOnInit() {
  const compass = new Compass(document.querySelector('#myCanvas'), {
    size: 200,
  });
}

Answer 2

您不需要 index.html 中的脚本标记。您正在 app.component.ts 文件中导入 js。
您在 displayCanvas 函数中使用了 document.querySelector。要完成这项工作，您需要在 myCanvas 前加上 # 作为 id 的前缀，例如 document.querySelector("#myCanvas")，并将 id="myCanvas" 添加到 canvas html 标签。（这与标签中的 #myCanvas 作为属性不同。请在此处查看工作示例：https://stackblitz.com/edit/angular-ivy-gol2jx?file=src/app/app.component.html
但这种方式不是 angular 的最佳做法，因为您不能将其用于多个组件，因为 document.querySelector("#myCanvas") 在整个 html 文档中查找 id 并仅使用第一个。如前所述，要使其更多 'angular-like'，您需要 ViewChild。只需使用 const compass = new Compass(this.myCanvas.nativeElement, ... )

如何在Angular项目中集成steelseries？

How to integrate steelseries in Angular project?

steelseries

angular