angular - 使用 router-outlet 时，页面刷新后 Observable 不更新值

Question

我正在使用 Angular2 RC5 和 @angular/router 以及一个简单的 router-outlet 元素。我有一个 Observable，它在 View 中工作正常，但当您刷新页面(F5 或 CTRL-F5)时它不工作。我在 Chrome(最新)和 IE11(可能还有其他浏览器)中有这个。 目前我有一个解决方法，但我不明白为什么我的更改没有自动反射(reflect)在 View 中。

该项目相当大，所以在这里尝试将其最小化:

在 MyService.ts 中

@Injectable()
export class MyService {
    initialValue: MyObject = new MyObject(); // actually I read this from local storage...

    _information: BehaviorSubject<MyObject> = new BehaviorSubject(this.initialValue);
    get obsMyObj(): Observable<MyObject> {
        return this._information.asObservable();
    }

    myServiceFunction() {
         return this.http.get(`api/myUrl`)
            .map(this.extractMyInfo);
    }

    extractMyInfo = (res: Response): MyObject {
        let body = res.json();
        var myObject = new MyObject().mapAllProperties(body);
        this._information.next(myObject);
        return myObject;
    }
}

在 MyComponent.ts 中:

@Component({
    selector: '[header]',
    templateUrl: 'app.component.header.html'
})

export class HeaderComponent implements OnInit {
    constructor(private myService: MyService) { }
    myObject: MyObject = new MyObject();

    ngOnInit() {
            this.myService.obsMyObj.subscribe(
                (data) => {
                    this.myObject = data;
                    });
    }
}

在 MyView.html 中

<div>
    <img [src]="myObject?.picture"> <!-- this always works, I see the picture after page refresh -->
    <p>{{myObject?.prop1 }}</p> <!-- this does not work after page refresh -->
</div>

另一个组件执行对 myServiceFunction 的实际服务调用，这就是我创建一个可观察对象以在 MyComponent.ts 中显示它的原因。

它不是使用 this.myObject = data 并手动分配属性，而是适用于每次页面刷新...

this.myObject.prop1 = data.prop1;
this.myObject.prop2 = data.prop1;

调试时，使用初始状态和页面刷新的正确数据调用 subscribe 方法。

我尝试直接绑定(bind)可观察对象，而不是在我的组件中使用对象。

我尝试使用异步管道。

Answer 1

也许您的问题来自 MyComponent 的 ngOnInit。您可以尝试订阅 this.myService.obsMyObj() 而不是 this.myService.obsMyObj 吗？

ngOnInit() {
  this.myService.obsMyObj().subscribe(
    (data) => {
      this.myObject = data;
    });
}