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