Question

在使用Ionic 3应用程序时，我遇到的问题是，当您从observable中的服务订阅ngOnInit并向其中更新本地变量时，它不会更新视图。 / strong>

例如 HTML模板 <p>{{myVariable}}</p>

constructor(myService: MyService) { } ngOnInit() { this.myService.myObservable.subscribe((data) => { this.myVariable = data; }); }

但是当您通过构造函数执行相同操作时，它会起作用。

contructor(myService: MyService) { this.myService.myObservable.subscribe((data) => { this.myVariable = data; }); }

它是Ionic 3应用程序。它包含不同的离子选项卡。问题在于，当您在ngOnInit中进行订阅时，视图不会自动更新。您可以在两个标签之间进行切换，以使其正常工作。但是，当您订阅constructor时，无需切换标签即可使用。

知道为什么会这样。任何提示将不胜感激。谢谢。

Answer 1

它与Angular变化检测有关，有关更多信息，请阅读：Angular Change detection。

您应该使用Angular ngZone服务来解决此问题，它将更新视图。

import { Component, NgZone } from "@angular/core";

constructor(
    private zone: NgZone
    ...
){ }

...

myService.myObservable.subscribe((data) => {
    this.ngZone.run(() => {
       this.myVariable = data;
    });
});

Answer 2

使用private myService

contructor(private myService: MyService) {
  this.myService.myObservable.subscribe((data) => {
    this.myVariable = data;
  });
}

Answer 3

您没有明确说明您具有哪种可观察性（例如，“冷”，“热”，Subject，BehaviorSubject，HttpClient等可观察性）。如果您自己创建了一个可观察的对象，则很可能是因为它的值在您通过ngOnInit方法订阅之前已更改，因此取决于可观察对象的类型，该值会丢失。由于创建可观察对象的服务已注入构造函数中，因此构造函数可以更早地访问该服务可能发出的任何值。如果您自己构造可观察对象，请考虑使用BehaviorSubject：

What is the difference between Subject and BehaviorSubject?

为什么observable.subscribe仅在构造函数中起作用

3 个答案: