1

我正在尝试将 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 文件中的注释代码）。我错过了什么或做错了什么？提前致谢！

4

2 回答 2

1

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

例子

闪电战

html

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

脚本

ngOnInit() {
  const compass = new Compass(document.querySelector('#myCanvas'), {
    size: 200,
  });
}
于 2021-11-26T07:52:56.780 回答
0
  1. 您不需要 index.html 中的脚本标记。您正在 app.component.ts 文件中导入 js。
  2. 你document.querySelector在displayCanvas函数中使用。要完成这项工作，您需要为 id添加前缀myCanvas，然后添加到 canvas html 标记中。（这与标签中的属性不同。在此处查看一个工作示例：https ://stackblitz.com/edit/angular-ivy-gol2jx?file=src/app/app.component.html 但是那样不是 Angular 的最佳实践，因为您不能将其用于多个组件，因为在整个 html 文档中查找 id 并仅使用第一个。要使其更像“角度”，您需要如前所述。只需使用#document.querySelector("#myCanvas")id="myCanvas"#myCanvas
    document.querySelector("#myCanvas")ViewChildconst compass = new Compass(this.myCanvas.nativeElement, ... )
于 2021-11-26T07:55:27.590 回答