我有一个关于变更检测的简单问题。
我有一个组件和一个(全局)服务,里面有一个布尔值。如果该布尔值发生变化,如何让组件监听该布尔值并执行函数?
谢谢!
我有一个关于变更检测的简单问题。
我有一个组件和一个(全局)服务,里面有一个布尔值。如果该布尔值发生变化,如何让组件监听该布尔值并执行函数?
谢谢!
根据该布尔值更改的方式,您可以将其公开为Observable<boolean>
您的服务,然后在您的组件中订阅该流。您的服务将类似于:
@Injectable()
export class MyBooleanService {
myBool$: Observable<boolean>;
private boolSubject: Subject<boolean>;
constructor() {
this.boolSubject = new Subject<boolean>();
this.myBool$ = this.boolSubject.asObservable();
}
...some code that emits new values using this.boolSubject...
}
然后在你的组件中你会有这样的东西:
@Component({...})
export class MyComponent {
currentBool: boolean;
constructor(service: MyBooleanService) {
service.myBool$.subscribe((newBool: boolean) => { this.currentBool = newBool; });
}
}
现在,根据您需要对该 bool 值做什么,您可能需要做一些其他事情来更新您的组件,但这是使用 observable 的要点。请注意,您可能希望在某些时候取消订阅 myBool$ 流,以防止内存泄漏和意外副作用。
另一种选择是在模板中使用异步管道,而不是在构造函数中显式订阅流。这也将确保订阅被自动处理。不过,这又取决于您需要对 bool 值做什么。
山姆的回答是完全正确的。我只想补充一点,您还可以利用 TypeScript 设置器来自动触发更改事件:
@Injectable()
export class MyBooleanService {
myBool$: Observable<boolean>;
private boolSubject: Subject<boolean>;
private _myBool: Boolean;
constructor() {
this.boolSubject = new Subject<boolean>();
this.myBool$ = this.boolSubject.asObservable();
}
set myBool(newValue) {
this._myBool = newValue;
this.boolSubject.next(newValue);
}
}