javascript - Subject.subscribe 在构造函数之外不工作

Question

我有一个简单的服务。

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class XmlService {
    items$: Subject<Item[]> = new Subject<Item[]>();

    constructor() {
        setTimeout(() => this.items.next([{age: '20'}]), 4000);
    }
}

在 app.module.ts 和相应的文件中进行设置后，我来到 app.component.ts，我有以下设置:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private xmlService: XmlService) {
        // Try 1. It worked fine
        xmlService.items$.subscribe(items => console.log(items));
    }

    calledFromClick() {
        // Try 2. Does not work at all even though the method is clicked
        this.xmlService.items$.subscribe(items => console.log(items));
    }
}

为什么尝试 1 成功而尝试 2 失败有什么原因吗？我觉得这个问题与另一个问题重复，但我想不出问这个问题的正确方法。

期待您的帮助🤞🏼

Answer 1

编辑: 起初我建议使用 ReplaySubject，但我猜 BehaviorSubject 会更好

https://medium.com/@luukgruijs/understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject-8cc061f1cfc0

您可以像这样使用 BehaviorSubject:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class XmlService {
    items$: BehaviorSubject<Item[]> = new BehaviorSubject<Item[]>();

    constructor() {
        setTimeout(() => this.items.next([{age: '20'}]), 4000);
    }
}

BehaviourSubject 存储它的最后一个值，因此订阅者将始终获得最新值，即使它是在调用订阅方法之前发出的。