我正在将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;
调试时,将使用初始状态和页面刷新时的正确数据来调用subscription方法。
我尝试直接绑定(bind)可观察对象,而不是在组件中使用对象。
我尝试使用异步管道。
最佳答案
也许您的问题来自ngOnInit
的MyComponent
。您可以尝试订阅this.myService.obsMyObj()
而不是this.myService.obsMyObj
吗?
ngOnInit() {
this.myService.obsMyObj().subscribe(
(data) => {
this.myObject = data;
});
}