如何将JS类转为Angular组件？转换后遇NullInjectorError错误求助

问题背景 #

你尝试将一个JavaScript的Maze类转换为Angular组件，但运行时出现了依赖注入相关的错误。

原JavaScript Maze类 #

class Maze {
    
    constructor(size, rows, columns) {
    
        this.size = size;
        this.rows = rows;
        this.columns = columns;
        this.grid = [];
        this.stack = [];
    }

    setup() {
        for(let r = 0;r < this.rows; r++) {
            let row = [];
            for(let c = 0; c < this.columns; c++) {
                let cell = new Cell(r, c, this.grid, this.size);
                row.push(cell);
            }
            this.grid.push(row)
        }
    }

}

你的尝试代码 #

export class MazeComponent implements OnInit {

  current;
  public size: Number;
  public rows: Number;
  public columns: Number;
  public grid: Cell[][];
  public stack: Number;


  constructor(size: Number, rows: Number, columns: Number) {
    this.size = 500;
    this.rows = 10;
    this.columns = 10;
    this.grid = [];
    this.stack = 0;
  }

  ngOnInit(): void {
  }

  setup() {
    for(let r = 0; r < this.rows; r++) {
      let row: Cell[] = [];
      for(let c = 0; c < this.columns; c++) {
        let cell: Cell = new Cell(r, c, this.grid, this.size);
        row.push(cell);
      }
      this.grid.push(row);
    }
    this.current = this.grid[0][0];
  }
}

错误信息 #

core.mjs:7640 ERROR NullInjectorError: R3InjectorError(AppModule)[Number -> Number -> Number]: NullInjectorError: No provider for Number!

错误原因及修复方案 #

1. 构造函数参数引发依赖注入错误 #

Angular会把组件构造函数的参数当作需要注入的依赖项处理。你在构造函数里声明了size: Number、rows: Number、columns: Number，Angular会尝试查找并注入Number类型的服务，但Number并不是可注入的Angular服务，因此抛出"No provider for Number"错误。

修复： 移除构造函数中的参数——你并没有使用传入的参数，而是直接赋值了固定值。如果后续需要从父组件传入这些参数，可以使用@Input()装饰器。

2. 类型定义不匹配 #

原JavaScript类中stack是数组，但你在组件里将其类型定义为Number，会导致类型不兼容。

修复： 将stack的类型改为数组类型，比如public stack: any[]，或者更具体的public stack: Cell[]（如果stack存储的是Cell实例）。

3. 初始化逻辑位置错误 #

组件的初始化逻辑（比如调用setup方法）应该放在ngOnInit生命周期钩子中，构造函数仅适合做简单属性赋值，避免执行复杂初始化逻辑。

修复： 在ngOnInit中调用setup方法。

修正后的组件代码 #

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

// 假设Cell类已正确定义或导入
class Cell {
  constructor(public row: number, public col: number, public grid: Cell[][], public size: number) {}
}

@Component({
  selector: 'app-maze',
  template: `<div></div>`
})
export class MazeComponent implements OnInit {

  current: Cell;
  public size: number = 500;
  public rows: number = 10;
  public columns: number = 10;
  public grid: Cell[][] = [];
  public stack: Cell[] = [];

  constructor() { }

  ngOnInit(): void {
    this.setup();
  }

  setup() {
    for(let r = 0; r < this.rows; r++) {
      let row: Cell[] = [];
      for(let c = 0; c < this.columns; c++) {
        let cell: Cell = new Cell(r, c, this.grid, this.size);
        row.push(cell);
      }
      this.grid.push(row);
    }
    this.current = this.grid[0][0];
  }
}

内容的提问来源于stack exchange，提问作者Piotr Deja