Angular 2 组件监听服务变化

Question

我有一个关于变化检测的简单问题。

我有一个组件和一个内部有布尔值的（全局）服务。如何让组件监听该布尔值并在该布尔值发生变化时执行函数？

谢谢！

Answer 1

根据该布尔值的变化方式，您可以将其作为 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$ 流，以防止内存泄漏和意外的副作用。

另一种选择是在模板中使用异步管道，而不是在构造函数中显式订阅流。这也将确保自动处理订阅。不过，这又取决于您究竟需要对布尔值做什么。

Answer 2

山姆的回答完全正确。我只想补充一点，您还可以利用 TypeScript setter 自动触发更改事件：

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

Angular 2 组件监听服务变化

Angular 2 Component listen to change in service

angular2-services

angular2-changedetection

angular