Angular项目如何整合钢系？

Question

I am trying to integrate steelseries in an Angular project.我正在尝试将steelseries集成到 Angular 项目中。 Following their example , my code looks like this: app.component.html:按照他们的示例，我的代码如下所示： 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: 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
  //   });
  // }
}

With this code, nothing is displayed on my web page.使用此代码，我的 web 页面上不会显示任何内容。 My thought is that canvas is not rendered correctly.我的想法是 canvas 渲染不正确。 I have seen that this could be done using ViewChild .我已经看到这可以使用ViewChild来完成。 I did some unsuccessfully tests (see the commented code from.ts file).我做了一些不成功的测试（请参阅 .ts 文件中的注释代码）。 What am I missing or doing wrong?我错过了什么或做错了什么？ Thanks in advance!提前致谢！

Answer 1

First of all, you don't need to add index.js file to html.首先，您不需要将 index.js 文件添加到 html。

example例子

stakblitz 闪电战

html html

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

script脚本

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

Answer 2

you don't need the script tag in the index.html.您不需要 index.html 中的脚本标签。 You are importing the js in the app.component.ts file.您正在 app.component.ts 文件中导入 js。
you use document.querySelector in the displayCanvas function.您在displayCanvas function 中使用document.querySelector 。 To make that work you would need to prefix myCanvas with # for the id like document.querySelector("#myCanvas") and add id="myCanvas" to the canvas html tag.要完成这项工作，您需要为myCanvas加上#前缀，例如document.querySelector("#myCanvas")并将id="myCanvas"添加到 canvas html 标记。 (That is not the same as just #myCanvas as attribute in the tag. See an working example here: https://stackblitz.com/edit/angular-ivy-gol2jx?file=src/app/app.component.html （这与标签中的#myCanvas属性不同。请参阅此处的工作示例： https://stackblitz.com/edit/angular-ivy-gol2jx?file=src/app/app.component.html
But that way is not best practise for angular, because you could not use that for multiple components, because document.querySelector("#myCanvas") looks for the id in the whole html document and uses only the first.但是这种方式对于 angular 来说不是最佳实践，因为您不能将它用于多个组件，因为document.querySelector("#myCanvas")在整个 html 文档中查找 id 并且只使用第一个。 To make it more 'angular-like' you would need as you already mentioned ViewChild .为了使它更“像角度”，你需要你已经提到ViewChild 。 Just use const compass = new Compass(this.myCanvas.nativeElement, ... )只需使用const compass = new Compass(this.myCanvas.nativeElement, ... )

Angular项目如何整合钢系？

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-11-26 07:52:56

解决方案2
0 2021-11-26 07:55:27

Angular项目如何整合钢系？

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-11-26 07:52:56

解决方案2 0 2021-11-26 07:55:27

解决方案1
1 已采纳 2021-11-26 07:52:56

解决方案2
0 2021-11-26 07:55:27