为什么我无法访问 Angular 组件的传递函数内的 class 属性？

Question

我在 Angular 组件内使用 HTML 5 地理定位：

...
    export class AngularComponent {
    ...
        constructor(private db: DatabaseService) {}

        // this function is assigned to an HTML button
        logCoords(message, action) {
        navigator.geolocation.getCurrentPosition(this.success, this.error, this.options);
        }

        success(pos) {
            function time() {
            ...
            }
            var crd = pos.coords;
            var lat = crd.latitude
            var long = crd.longitude

            let newCoordinates = {'lat': lat, 'long':long, 'time': time}
            this.db.addLocation(newCoordinates)
        }
    ...
    }
...

我想使用 Angular 服务将 getCurrentPosition 方法的结果存储在索引数据库中，但我无法访问组件的任何属性 class（this.db 为空).

为什么我无法在成功函数中访问 this.db，我该如何解决这个问题？

Answer 1

因为在将方法作为回调传递时丢失了上下文 this。您可以通过多种方式解决此问题：

logCoords(message, action) {
    // bind context
    navigator.geolocation.getCurrentPosition(this.success.bind(this), this.error.bind(this), this.options);
}

或

logCoords(message, action) {
    navigator.geolocation.getCurrentPosition(this.success, this.error, this.options);

    success = (pos) => {} // <= arrow function
    error = () => {}      // <= arrow function
}

Answer 2

问题出在下面一行：

navigator.geolocation.getCurrentPosition(this.success, this.error, this.options);

在上一行中，您只是将 this.success 作为回调传递，而没有为其设置上下文。因此，在这种情况下，根据 javascript 原则，this 将始终引用 window 对象，而您期望组件引用。
要解决此问题，您必须在传递 this.success 之前设置上下文（组件实例），为此 javascript 提供了 bind() 函数。

尝试下面的代码（非常简单的修复）-

navigator.geolocation.getCurrentPosition(this.success.bind(this), this.error.bind(this), this.options);

有关 bind() 函数的更多详细信息，请参阅下文 link -

https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Global_objects/Function/bind

为什么我无法访问 Angular 组件的传递函数内的 class 属性？

Why am I unable to access class properties inside of a passed function of an Angular component?

javascript

angular

typescript

geolocation