Angular:尝试在我服务中的两个函数之间同步

Question

我有两个单独工作的函数但是我想在它们一起工作时同步。

一个函数getRandomNumbers—每秒钟以1 ~ 20的随机数显示一个角色

第二个函数up-按钮，允许我改变的数量getRandomNumbers一按按钮，数字将前进+1

stackblitz

我代码:

服务:

export class ElevatorService {
floor = new BehaviorSubject<number>(3);
floorNumber: number = -1;
constructor() {
this.floor.next(1);
}
getRandomNumbers() {
return interval(1000).pipe(
map(() => Math.floor(Math.random() * 20) + 1),
tap((res) => (this.floorNumber = res))
);
}

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

我component.ts:

export class AppComponent  {
floor = new BehaviorSubject<number>(3);
Count = 0;
buttonsDisabled: boolean = false;
ngOnInit(): void {
this.Count++;
this.elevatorService.getRandomNumbers().subscribe(this.floor);
}
elevatorServiceFloorValue$ = this.elevatorService.floor;
constructor(private elevatorService: ElevatorService) { }
up() {
this.elevatorService.up();
}

我component.html:

<input type="button" value="Up" (click)="up()" />
<div class="elevator">
<pre class="floor">{{ this.floor | async }}</pre>
</div>

Answer 1

你想在服务中保留状态并将该状态推送到主题:

floorSubject = new BehaviorSubject<number>(0);
floorNumber: number = 0;
get floor() {
return this.floorSubject.asObservable()
}

您还引用了组件中的计数，类似于我刚刚看到的其他一些用户问题。我删除它是因为它没有任何有意义的用途。

我这样做，所以你只需要订阅getNumbers，它就可以开始将随机值推送到相同的主题。

这是你在Stackblitz

上的代码的全部修复