Question

我正在使用Angular 5应用。我收到一个错误，因为我有一个函数在另一个函数完成之前执行，因此得到一个空变量。我尝试将.map和.subscribe与Observable结合使用，但未成功。这是代码：

从我的 app.component类中调用

loadData：

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

如何等待订阅完成Angular 5？

1 个答案: