Có thể quan sát không cập nhật giá trị sau khi làm mới trang khi sử dụng bộ định tuyến

Question

Tôi đang sử dụng Angular2 RC5 và @angular/router với phần tử router-outlet đơn giản. Tôi có Observable hoạt động tốt trong chế độ xem nhưng không hoạt động khi bạn làm mới trang (F5 hoặc CTRL-F5). Tôi có điều này trong Chrome (mới nhất) và IE11 (và có thể là các trình duyệt khác). Hiện tại tôi có giải pháp thay thế nhưng tôi không hiểu tại sao các thay đổi của tôi không được phản ánh trong chế độ xem theo cách tự động.

Dự án này là khá lớn nên cố gắng giảm thiểu nó ở đây:

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

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

Trong 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> 

Loại khác thành phần thực hiện cuộc gọi dịch vụ thực tế đến myServiceFunction, đó là lý do tại sao tôi đã tạo một quan sát để hiển thị nó trong MyComponent.ts.

Thay vì sử dụng this.myObject = data và gán thuộc tính bằng tay, nó hoạt động cho mỗi refresh trang ...

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

Khi gỡ lỗi, các đăng ký phương pháp được gọi với các dữ liệu chính xác cho tình trạng ban đầu và làm mới trang.

Tôi đã cố gắng liên kết trực tiếp với quan sát thay vì sử dụng đối tượng trong thành phần của tôi.

Tôi đã thử sử dụng ống không đồng bộ.

Answer 1

Có thể sự cố của bạn xuất phát từ số ngOnInit trong số MyComponent của bạn. Bạn có thể thử đăng ký theo số this.myService.obsMyObj() thay vì this.myService.obsMyObj không?

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