在 Angular 组件中,使用 RxJS 的 interval 操作符来创建一个可以递增值的 Observable。
在模板中使用 async 管道来订阅 Observable 并显示递增的值。
以下是一个示例组件:
import { Component, OnInit } from '@angular/core';
import { interval, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-incrementing-value',
template: `
Value: {{ value$ | async }}
`,
})
export class IncrementingValueComponent implements OnInit {
value$: Observable;
ngOnInit() {
this.value$ = interval(1000).pipe(
map((value) => {
if (value % 2 === 0) {
return value * 2; // double the increment every second tick
}
return value;
})
);
}
}
这个组件会每秒递增一个值,但是每隔一个周期就会将增量加倍。然后,在模板中使用 async 管道订阅该值并显示它。