Angular：嘗試將服務注入到組件中

Question

我正在嘗試將服務中的功能注入到組件中重要的是要注意該功能在組件中有效，但是當我嘗試從服務中注入它時它不起作用（沒有錯誤，代碼不起作用）

我的服務：

@Injectable({
  providedIn: 'root'
})
export class ElevatorService {
  floor = new ReplaySubject<number>(1);
  floorNumber: number = -1;


  constructor() { }

  up() {
    const floor = this.floor;
    floor.pipe(
        take(1),
        filter((v) => v < 20),
        map((v) => v + 1)
      )
      .subscribe((v) => this.floor.next(v));
      return floor;
  }

我的組件.ts：

export class ElevatorComponent implements OnInit {
  
  constructor(private elevatorService: ElevatorService) { }
    
  ngOnInit(): void {
  }
  
  up() {
    this.elevatorService.up();
  }

我的組件.html：

<input type="button" value="Up" (click)="up()" >

Answer 1

原因是因為您的ReplaySubject沒有初始值。 您必須在 init 上設置初始值：

export class ElevatorService {
  floor = new ReplaySubject<number>(1);
  floorNumber: number = -1;

  constructor() {
    this.floor.next( ... // initial value);
  }
    
  up() {
    const floor = this.floor;
    floor.pipe(
        take(1),
        filter((v) => v < 20),
        map((v) => v + 1)
      )
      .subscribe((v) => this.floor.next(v));
      return floor;
  }
}

如果您不需要 ReplaySubject，可能是因為不需要重復值， - 只需在構造函數中使用具有初始狀態的BehaviorSubject ：

floor = new BehaviorSubject<number>(1);

這是一個Stackblitz供您玩。