如何等待订阅完成 Angular 5？

Question

我正在开发一个 Angular 5 应用程序。我收到一个错误，因为我有一个在另一个函数完成之前执行的函数，因此得到一个空变量。我曾尝试将 .map 和 .subscribe 与 Observable 一起使用，但没有成功。代码如下：

loadData 是从我的 app.component 类调用的：

ngOnInit() {
    this.dataService.loadData(sessionStorage.getItem(...);
}

当该函数执行时，data.component 类中的另一个函数（dataService.getData）在初始化时被调用：

constructor(private dataService: DataService) {}

ngOnInit() {
    this.dataTxt = this.dataService.getData(...);
}

这是 data.service 类：

loadData(... : void) {
    if (sessionStorage["data"] == null {
        this.http.request(...)
        .map((response: Response) => response.json()).subscribe(data => {
            ...
            sessionStorage.setItem("data", JSON.stringify(this.data));
            ...
        }
    }
}

getData(... : string){
    if (this.data == null) {
        this.data = JSON.parse(sessionStorage["data"]);
    }
    ...
}

问题是 sessionStorage["data"] 在 loadData() 完成之前为空，并且我多次收到此错误：

ERROR SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)

我知道如果我想等待订阅完成，我必须将需要等待的代码 (getData()) 放在订阅调用之后。但是需要等待的函数是从其他类调用的，那我怎么放在那里呢？

Answer 1

您错误地将代码放在订阅处理程序“之后”，您需要将其放在订阅处理程序的内部，但无论如何，

您需要在这里使用某种主题，在这种特殊情况下可能是 ReplaySubject...

private dataSource = new ReplaySubject(1) // create a private subject
data$ = this.dataSource.asObservable() // and a public observable

loadData(... : void) {
    if (sessionStorage["data"] == null {
        this.http.request(...)
        .map((response: Response) => response.json()).subscribe(data => {
            ...
            sessionStorage.setItem("data", JSON.stringify(this.data));
            this.dataSource.next(data) // set the data in the subject
            ...
        }
    }
}

那么您将订阅组件中的主题...

ngOnInit() {
    this.dataService.data$.pipe(first()) // avoid memory leak.
      .subscribe(data => this.dataTxt = data);
}