不确定如何在 angular 组件中使用自定义 TypeScript class

Question

我有一个组件 GameBoardComponent，我想要一个 Box，它是 TypeScript class。 我最初试图让它像“class Box {}”，但我读到你不能这样做，所以我尝试了“export class Box(){}”，现在看起来像：

import {GameBoardComponent} from './game-board/game-board.component';
import * as p5 from 'p5';
export class Box {
    x: number;
    y: number;
    width: number;
    height: number;
    board: GameBoardComponent;
    constructor(x: number,y: number, width:number) {
        this.width = width;
        this.height = width;
        this.x=1;
        this.y=1;

    }
    draw(canvas: p5): void {
        canvas.rect(this.x,this.y,this.width,this.height);
    };

}

我的游戏板看起来像：

import { Component, OnInit } from '@angular/core';
import { Box } from '../Box';

import * as p5 from 'p5';



/** 
*@todo Game Board
*@body Complete the gameboard, possible integration with other smaller components ie a Tetris component or a Box component
*/
@Component({
  selector: 'app-game-board',
  template: `
    <p>
      game-board works!
    </p>
  `,
  styleUrls: ['./game-board.component.scss']
})
export class GameBoardComponent implements OnInit {
  height: number;
  width: number;
  canvas: p5;
  test: Box;
  constructor() { }

  ngOnInit() {
    this.height = 100;
    this.width = 20;
    this.test = new Box(1,1,this.canvas.width);


    const sketch = (s) => {



      s.preload = () => {
        // preload code
      }

      s.setup = () => {
        s.createCanvas(window.innerWidth/4, window.innerHeight*.8);
      };

      s.draw = () => {
        s.scale(1, -1);
        s.translate(0, -s.height);
        s.background(0);
        s.rect(100, 100, 100, 100);
        s.test.draw();
      };

      s.windowResized = () => {
        s.resizeCanvas(window.innerWidth/4, window.innerHeight*.8);
      };
    }

    this.canvas = new p5(sketch);

  }

}

我的 app.module 看起来像：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MatButtonModule} from '@angular/material/button';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GameBoardComponent } from './game-board/game-board.component';
import { TetrisPieceComponent } from './tetris-piece/tetris-piece.component';
import { HoldBoxComponent } from './hold-box/hold-box.component';
import { ViewBoxComponent } from './view-box/view-box.component';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { Box } from './Box';

@NgModule({
  declarations: [
    AppComponent,
    GameBoardComponent,
    TetrisPieceComponent,
    HoldBoxComponent,
    ViewBoxComponent,
    MainMenuComponent,
    Box
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule
  ],
  providers: [

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

尝试编译时出现以下错误：

Uncaught Error: Unexpected value 'Box' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

我在谷歌上广泛搜索了这个错误，并试图将 app.module 中的 Box 从声明移到提供者的其他位置，但它给出了不同的错误并且无法解析构造函数类型。 所以也许这就是我的问题？ 不管我花了一大半早上的时间试图找出在 angular 组件中使用我自己的 typescript class 的正确方法是什么，我还没有找到任何可行的方法。

任何帮助，将不胜感激。

Answer 1

无需在app.module.ts中声明Box ，因为它不是模块、组件、指令或 pipe。 所以只需从app.module.ts中删除Box 。