Question

我想在Angular中构建一个充当控制器的类。但我无法将constructor()中的值传递给我班级中的方法。错误是：

TypeError：无法读取未定义的属性“数据”

当然，我想要的结果是console.log this.data。

我的代码如下：

const app = angular.module('app', ['ngRoute']);

class ArtistController {
    constructor($route, $routeParams, $http) {
        let dataSrc = './data',
            artist = $routeParams.artist,
            data = dataSrc+'/'+artist+'.json';

        this.data = data;

        $http.get(data).then(this.renderArtist, this.fail);
    }

    renderArtist() {
        console.log(this.data);
    }

    fail(err) {
        console.log(err);
    }
}

ArtistController.$inject = ['$route', '$routeParams', '$http'];

app.config(($routeProvider) => {
    $routeProvider
        .when('/', {
            template: 'Nothing selected'
        })
        .when('/music/:artist', {
            controller: ArtistController,
            templateUrl: 'tpl/artist.html'
        })
        .otherwise({
            template: '404'
        });
});

我该怎么办？

Answer 1

你的“this”在renderArtist中不会是你的构造函数中的“this”，因为在javascript中“this”始终是上下文敏感的。您将函数renderArtist作为对$ http服务的引用作为回调

$http.get(data).then(this.renderArtist, this.fail);

所以当$ http完成其调用时，它将从窗口上下文中调用函数renderArtist。因此“这个”将是“窗口”。你有两个选择：

1）将回调绑定到您想要它的上下文

 $http.get(data).then(this.renderArtist.bind(this), this.fail);

2）使用箭头符号（查看ES6规范以了解其工作原理 - 最后它与默认情况下的第一种方法相同。它会记住它在

中定义的上下文

 renderArtist = () => {
        console.log(this.data);
    }

无法从构造函数

1 个答案: