Angular2组件属性变量在Init（）之后丢失值

有人能解释一下我遗漏了什么吗？我正在为OnInit生命周期挂钩中的属性变量赋值，但当尝试在单击事件时再次访问它时，该值消失了：

从'angular2/core'导入{Component}；
从'angular2/core'导入{OnInit}；
@组成部分({
选择器：“简单测试”，
模板：`
搜索场地
`
})
导出类SimpleTestComponent实现OnInit{
public-userLoc:string；
构造函数（）{}
getSearchResults（）{
console.log（'userLoc:'+this.userLoc）；
}
恩戈尼尼特（）{
这是.initGeoLocation（）；
}
初始地理位置（）{
//试试HTML5地理定位。
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
this.userLoc=`${position.coords.latitude}，${position.coords.longitude}`；
console.log（'userLoc:'+this.userLoc）；
});
} 
}
}

首先，您在getCurrentPosition回调函数中失去了正确的上下文。改用箭头功能：

initGeoLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（位置=>{
this.userLoc=`${position.coords.latitude}，${position.coords.longitude}`；
console.log（'userLoc:'+this.userLoc）；
});
} 
}

---

第二个潜在问题。您需要知道地理定位API是异步的，因此如果您过早单击，

userLoc

的值可能不可用。考虑禁用按钮，直到当前位置被解析。

首先，您正在释放GeCurrTrror位置回调函数中的正确上下文。改用箭头功能：

initGeoLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（位置=>{
this.userLoc=`${position.coords.latitude}，${position.coords.longitude}`；
console.log（'userLoc:'+this.userLoc）；
});
} 
}

---

第二个潜在问题。您需要知道地理定位API是异步的，因此如果您过早单击，

userLoc

的值可能不可用。考虑禁用按钮直到当前位置被解析。

这里是你的问题的PLNKR：

搜索场地

以下是针对您的问题的工作plnkr：

搜索场地

感谢您的回答，尽管它并没有解决问题-它表明需要像您所做的那样添加单元测试，我现在将尝试集成单元测试。我不会像plunker中的simple file那样将模板拆分为templateUrl文件，如：保持组件的模板尽可能精简，并将它们内联到@Component decorator中。将更复杂、更大的模板（长度超过15行代码）提取到一个单独的文件中，并将其放在控制器定义的旁边。噢，感谢您为angular2发布了这么好的链接，即

样式指南

。谢谢您的回答，尽管它没有解决这个问题，但它表明了需要像您所做的那样添加单元测试，我现在将尝试集成这些测试。我不会像plunker中的simple file那样将模板拆分为templateUrl文件，如：保持组件的模板尽可能精简，并将它们内联到@Component decorator中。将更复杂、更大的模板（超过15行代码）提取到一个单独的文件中，并将其放在其控制器定义的旁边。感谢您为angular2发布了这样一个伟大的链接，即

样式指南

。

<button type="button" class="btn btn-primary" (click)="initGeoLocation()">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search Venues
</button>