在Angular 9中,使用BehaviorSubject
的Observable
getter返回对象而不是布尔值,可以使用map
操作符来转换Observable
的值。
下面是一个示例代码:
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
Example Component
{{ value$ | async | json }}
`
})
export class ExampleComponent {
private valueSubject = new BehaviorSubject(false);
value$ = this.valueSubject.asObservable().pipe(
map(value => {
if (value) {
return { property: 'Value is true' };
} else {
return { property: 'Value is false' };
}
})
);
toggleValue() {
this.valueSubject.next(!this.valueSubject.value);
}
}
在上面的示例中,valueSubject
是一个BehaviorSubject
,用于存储布尔值。value$
是一个Observable
getter,使用map
操作符将布尔值转换为相应的对象。
在模板中,我们使用async
管道来订阅value$
的值,并使用json
管道将对象转换为可读的字符串进行显示。
当点击“Toggle Value”按钮时,toggleValue
方法将反转valueSubject
的值,并通过next
方法发送新的值到value$
的订阅者。这将触发模板中的更新,并显示新的对象值。