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

我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);

这里有一个Stackblitz供您使用。