Angular 2 View не освежает

Question

Я работаю с проектом в Angular 2. Я хочу получить текущее местоположение пользователя (который работает), но представление после обновления не обновляется.

Я поставил код, чтобы получить место в службе:

getCurrentLocation(): Observable<Coordinates> { 
    return new Observable((ob) => navigator.geolocation.getCurrentPosition(s => ob.next(s.coords), e => ob.next(null))); 
    } 

Я вызываю службу из OnInit:

ngOnInit() { 
    this.title = 'Title 1'; 
    this.locationService.getCurrentLocation().subscribe(r => { 
     this.title = 'Title 2'; 
     alert(`this tells me it has reurned with ${r.latitude}, ${r.longitude}`); 
    }); 
    } 

Место, Observable и т.д. все работает. Появляется сообщение Alert, оно показывает местоположение, но вид остается на «Title 1».

Я что-то упустил?

Update:
Я создал новый проект, и просто поставить это в нем:

constructor() { 
    this.title = 'Title 1'; 
    this.getCurrentLocation().subscribe(r => { 
     this.title = 'Title 2'; 
     alert('got loc'); 
    }); 
    } 

    getCurrentLocation(): Observable<Coordinates> { 
    return new Observable((ob) => navigator.geolocation.getCurrentPosition(s => ob.next(s.coords), e => ob.next(null))); 
    } 

Он работает здесь.
В моем проекте должно быть что-то еще, что что-то ломает.

Update 2:
Итак, я удалил компонент, создал новый, и это, кажется, работает. Не знаю, почему ...

Answer 1

Кажется, проблема с обнаружением изменений. Обнаружение изменений запускается при каждом событии браузера, тайм-ауте или HTTP-запросе.

Дело в том, что ваша функция асинхронна и ее обратный вызов не обнаружен для Angular и, следовательно, он не запускает событие обнаружения изменений, чтобы обновить представление.

Чтобы решить эту проблему, вам придется обернуть эту функцию в угловую зону. Смотрите этот код:

импорт зона:

import { NgZone } from '@angular/core'; 

Инжектируйте ngZone службы:

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

И, наконец, добавить к вашей функции:

ngOnInit() { 
this.title = 'Title 1'; 
this.locationService.getCurrentLocation().subscribe(r => { 
    this.zone.run(
    () => { 
    this.title = 'Title 2'; 
    } 
) 
alert(`this tells me it has reurned with ${r.latitude}, ${r.longitude}`); 
}); 
} 

Надеется, что это помогает.

Answer 2

Как уже упоминалось, это проблема с обнаружением изменений. Однако вместо NgZone, я думаю, вы можете получить лучший пробег из-за использования ChangeDetectorRef.detectChanges, чтобы вызвать локальное обновление привязок, связанных с вашим компонентом. (В примере на вышеперечисленной странице документа он показывает использование detach рядом с detectChanges, но вы можете использовать его самостоятельно.)