Angular:试图将组件中的功能转移到服务中

Question

我想将up函数转移到服务中，并在组件中调用它们。

一个非常简单的应用程序，分为几个部分:

1. 在服务中我有两个功能:

• getRandomNumbers-每秒显示一个1到20之间的随机数

崩溃

• -如果我按向上键20次，它会使我禁用按钮

2. 在组件中我有up功能:

• **up -按下按钮时up功能的作用使数字增加+1

在stackblitz中，我将在组件中显示函数(up)我将在它下面发送的代码是我试图使它工作的代码

我stackblitz

我想做什么:

我的服务:

export class ElevatorService {
floor = new BehaviorSubject<number>(1);
floorNumber: number = -1;
Count = 0;
getRandomNumbers() {
return interval(1000).pipe(
map(() => Math.floor(Math.random() * 20) + 1),
tap((res) => (this.floorNumber = res))
);
}
breakDown() {
this.Count++;
if (this.Count >= 20) return true;
return false;
}
up() {
this.breakDown();
this.floor
.pipe(
take(1),
filter((v) => v < 20),
map((v) => v + 1)
)
.subscribe((v) => this.floor.next(v));
}

我component.ts

:

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

我component.html:

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

Answer 1

我希望我明白你想要达到的目的，如果你想要的是将整个up()函数移动到breakDown函数，你可以将整个函数复制到elevator.service.ts并在组件构造函数中调用"public"而不是"private"

constructor(public elevatorService: ElevatorService) {}

那么你可以从HTML 中调用它

<input type="button" value="Up" (click)="elevatorService.breakDown()" [disabled]="buttonsDisabled" />