如何从常规打字稿 class（非组件）调用 angular 2+ 服务

Question

我正在使用 angular 6 构建一个 Phaser 3 应用程序。我想在打字稿 class（这是一个 Phaser 场景）中调用一个服务 (GameService)。如何使 class 使用依赖注入？

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 注释添加到您的非 angular class 并将其添加到 ngmodule 以使其可注入。不过这个好像不是"correct".

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

您在哪里调用/创建您的 PlayerConfigScene 对象？这不是在 angular 组件内还是可注入的？您不能只将所需的服务注入您的组件，然后使用您的服务构造您的配置对象吗？

如果您将游戏嵌入到 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);
  }
}

如何从常规打字稿 class（非组件）调用 angular 2+ 服务

How to call an angular 2+ service from a regular typescript class (non - component)

typescript

phaser-framework

angular