Question

有人可以解释我错过了什么 - 我在OnInit生命周期钩子中为属性变量赋值，但是当尝试在点击事件上再次访问它时，该值消失了：

import {Component} from 'angular2/core';
import {OnInit} from 'angular2/core';

@Component({
    selector: 'simple-test',
    template: `<button type="button" class="btn btn-primary" (click)="getSearchResults()">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search Venues
        </button>`
})

export class SimpleTestComponent implements OnInit {
    public userLoc: string;
    constructor() { }
    getSearchResults(){
        console.log('userLoc: ' + this.userLoc);
    }

    ngOnInit() {
        this.initGeoLocation();
    }

    initGeoLocation() {
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                this.userLoc = `${position.coords.latitude},${position.coords.longitude}`;
                console.log('userLoc: ' + this.userLoc);
            });
        } 
    }
}

Answer 1

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

initGeoLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            this.userLoc = `${position.coords.latitude},${position.coords.longitude}`;
            console.log('userLoc: ' + this.userLoc);
        });
    } 
}

第二个潜在问题。您需要知道地理位置API是异步的，因此如果您太快单击，userLoc的值可能不可用。在当前位置解决之前，请考虑禁用按钮。

Answer 2

这是为你的问题工作的plnkr：

http://plnkr.co/edit/uG4rfXySQYWHzlj6iIuj?p=preview

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

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

2 个答案: