Question

是否可以永久监听服务中的所有更改并将此信息传输到组件？

我知道我可以在以下服务中创建一个Observable：

@Injectable()
export class LoadingService {
    myBool$: Observable<boolean>;

    private boolSubject: BehaviorSubject<boolean>;

    constructor() {
        this.boolSubject = new BehaviorSubject(true);
        this.myBool$ = this.boolSubject.asObservable();
    }

    set myBool(newValue) {
        console.log("set",newValue)
        this.boolSubject.next(newValue);
    }
}

我也知道我可以拥有一个组件或指令（如下所示）来订阅可观察对象，以获取有关更改的通知。

@Directive({
    selector: '[loading]'
})
export class LoadingDirective implements AfterViewInit {

    constructor(
    private element: ElementRef, 
    private renderer: Renderer2, 
    private loadingService: LoadingService
) {

    this.loadingService.myBool$.subscribe(response => {
        console.log("-----",response)               
    })
}

但是我只得到subscribe中服务变量的第一次更改。我又如何获得所有将来的更改（例如事件监听器）？

谢谢您的帮助！

Answer 1

正在发生的小事。首先，在您的服务中，应将可观察序列声明为get函数，以便对其的所有新请求都返回一个新的可观察序列。编写方式是对BehaviorSubject的滥用。

get myBool$: Observable<boolean> {
  return this.boolSubject.AsObservable();
}

接下来，您应该真正了解模板中的Async Pipe。托德·莫托（Todd Motto）写了pretty decent article，内容涉及使用可观察变量直接从模板中订阅值的更改。

这可能看起来像以下内容（应该注意，此处的常规Subject是更可取的，因为BehaviorSubject会总是在订阅后立即返回值）：

<div *ngIf="myBool$ | async as value; else loading">
  <!-- use the value here? -->
  <span> {{ value }} </span>
</div>
<div #loading>
  ... loading spinner here ...
</div>

如何获得有关组件服务变更的通知？

1 个答案: