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等都在工作。警报弹出，它显示位置，但视图保持在＆＃34;标题1＆＃34;。

我错过了什么吗？

更新
我创建了一个新项目，并将其放入其中：

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

这是在这里工作。
我的项目中必定还有其他东西会破坏某些东西。

更新2：
所以，我删除了组件，创建了一个新组件，它似乎正在工作。我不知道为什么......

Answer 1

另一个答案已经指出，它似乎是一个变化检测问题。但是，我认为您可以通过使用ChangeDetectorRef.detectChanges触发与组件关联的绑定的本地刷新，而不是NgZone。（在上面链接的文档页面的示例中，它显示detach与detectChanges一起使用，但您可以单独使用后者。）

Answer 2

这似乎是一个变化检测问题。每次浏览器事件，超时或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}`);
 });
}

希望这有帮助。

Angular 2 View不令人耳目一新

2 个答案: