角:尝试将服务注入组件

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;
  }

我的component.ts：

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

我的component.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);

这是一个供你玩的斯塔克布利茨。