如何从常规打字稿类（非组件）调用角度 2+ 服务

Question

我正在构建一个 Angular 6 的 Phaser 3 应用程序。我想在 typescript 类（这是一个 Phaser 场景）中调用一个服务 (GameService)。如何让类使用依赖注入？

export class PlayerConfigScene extends Phaser.Scene {

    constructor(private gameService: GameService) {
        super({
            key: "PlayerConfigScene"
        });
    }

    init() {
        this.gameService.setEnableForms(true);
    } 
}

这是服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class GameService {

  private enableForms : BehaviorSubject<boolean> = new BehaviorSubject<boolean> (false);

  constructor() { }

  public setEnableForms(flag : boolean) {
    this.enableForms.next(flag);
  }

  public getEnableForms() : BehaviorSubject<boolean> {
    return this.enableForms;
  }


}

Answer 1

您可以将@Injectable 注释添加到您的非角度类中，并将其添加到 ngmodule 以使其可注入。但这似乎并不“正确”。

我认为您在这里混淆了概念。游戏开发 (Phaser) 使用与 Angular 不同的概念。

你在哪里调用/创建你的 PlayerConfigScene-Object？这不是在角度组件内还是可注射的？难道你不能只将所需的服务注入你的组件，然后用你的服务构造你的配置对象吗？

如果您将游戏嵌入到 Angular 项目中，您应该将游戏封装在 web component 或至少在组件中：

@Component({
  selector: "my-game-wrapper-component",
  template: "<div #myGameWrapper></div>"
})
export class MyGameWrapperComponent implements AfterViewInit {

  @ViewChild("myGameWrapper", { read: ElementRef }) myGameWrapperDiv: ElementRef;

  private game: MyAwesomeGame;

  constructor(private myAwesomeGameService: MyAwesomeGameService) {
    // MyAwesomeGameService has to be an injectable angular service
  }

  public ngAfterViewInit(): void {
    this.game = new MyAwesomeGame(this.myGameWrapperDiv.nativeElement, this.myAwesomeGameService);
  }
}