angular – 使用router-outlet时,在页面刷新后Observable不更新
发布时间:2020-12-17 18:05:22 所属栏目:安全 来源:网络整理
导读:我正在使用Angular2 RC5和@ angular / router以及一个简单的router-outlet元素.我有一个Observable在视图中工作正常但是当你进行页面刷新(F5或CTRL-F5)时它不起作用.我在Chrome(最新)和IE11(可能还有其他浏览器)中都有这个. 目前我有一个解决方法,但我不明白
我正在使用Angular2 RC5和@ angular / router以及一个简单的router-outlet元素.我有一个Observable在视图中工作正常但是当你进行页面刷新(F5或CTRL-F5)时它不起作用.我在Chrome(最新)和IE11(可能还有其他浏览器)中都有这个.
目前我有一个解决方法,但我不明白为什么我的更改没有自动反映在视图中. 该项目相当大,所以试图在这里尽量减少它: 在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进行实际服务调用,这就是为什么我创建了一个observable来在MyComponent.ts中显示它. 它不是使用this.myObject = data并手动分配属性,而是适用于每个页面刷新… this.myObject.prop1 = data.prop1; this.myObject.prop2 = data.prop1; 调试时,将调用subscribe方法,其中包含初始状态和页面刷新的正确数据. 我尝试直接绑定observable而不是使用组件中的对象. 我尝试使用异步管道. 解决方法
也许你的问题来自你的MyComponent的ngOnInit.您可以尝试订阅this.myService.obsMyObj()而不是this.myService.obsMyObj吗?
ngOnInit() { this.myService.obsMyObj().subscribe( (data) => { this.myObject = data; }); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |