angular - 服务始终返回构造函数中设置的值

Question

我正在开发一款游戏，只是为了好玩和学习 Angular v5。在我创建的服务中，我在构造函数中设置了一个默认值，有一个 getter 和一个 setter。在 Debug模式下运行项目时，我注意到:

• 调试器永远不会在构造函数处停止
• 调用 setter 并将 selectedBoat 设置为与构造函数中不同的值
• getter 总是返回在构造函数中设置的值。
• 服务被注入(inject)到 2 个组件中，一个我称为 setter，另一个称为 getter。

服务代码是:

import { Injectable } from '@angular/core';
import { BoatType } from '../../shared/modules/boatType';

@Injectable()
export class BoatContainerService {
  private boats: number[] = [BoatType.AircraftCarrier, BoatType.Battleship, BoatType.Destroyer, BoatType.PatrolBoat, BoatType.Submarine];
  private selectedBoat: BoatType;

  constructor() { 
    this.selectedBoat = BoatType.Undefined;
  }

  selectBoat(boat: BoatType) {
    this.selectedBoat = boat;
  }

  ignoreSelection() {
    this.selectedBoat = BoatType.Undefined;
  }

  removeBoat(boat: BoatType) {    
    this.boats.slice(boat, boat + 1);
  }

  getSelected() : BoatType {
    return this.selectedBoat;
  }
}

BoatType 是一个枚举:

export enum BoatType {
    Undefined = 1,
    AircraftCarrier,
    Battleship,
    Destroyer,
    Submarine,
    PatrolBoat
}

我尝试将数据类型替换为数字，结果是一样的。

所以，基本上它不起作用，因为即使我调用 selectBoat(...)，getSelected() 也始终返回“未定义”。为什么？

Answer 1

这些是将服务添加到提供者列表并注入(inject)的步骤:

将服务添加到模块提供者

import { BoatContainerService } from './boat-container.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [BoatContainerService]
})
export class AppModule { }

将服务注入(inject)组件

import { Component } from '@angular/core';
import {BoatContainerService} from './boat-container.service'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor (public BoatContainer:BoatContainerService) { 

  }
}

Add the service to single module(AppModule) will make the service singleton or shared service so will persist the state of the service and will create only once.

在 Angular 6 中，您可以通过在服务 Injectable 装饰器中设置它来跳过将服务添加到 app.module

@Injectable({
  providedIn: 'root',
})
export class BoatContainerService {
  ...
}

stackblitz example