angularjs - Angular 组件绑定(bind)未定义

Question

我正在尝试将我的第一个 Angular 组件与 ngRoute 放在一起，但到目前为止我无法获取数据来解析。
配置:

.when('/myfirstcomponent', {
    template: '<myfirstcomponent claimKeys="$resolve.claimKeys"></myfirstcomponent>',
    resolve: {
        claimKeys: ['$http', function($http) {
            $http.get('server/claimkeys.json').then((response) => {
                var claimKeys = response.data.DATASET.TABLE;
                return claimKeys;
            });
        }]
    }
})

零件:

    .component('myfirstcomponent', {
        bindings: {
            'claimKeys': '@'
        },
        templateUrl: 'components/component.html',
        controller: [function() {
            this.$onInit = function() {
                var vm = this;
                console.log(vm.claimKeys);
            };


        }]

该组件的 html 仅包含一个 p 元素，其中包含一些随机文本。

我可以在调试时看到我正在检索数据，但我无法在组件 Controller 上访问它......

编辑:感谢下面接受的答案，我已经解决了我的问题。它与异步调用的问题没有任何关系，而是与我定义路由和组件的方式有关。请参阅下面的代码进行修复。再次感谢。

Answer 1

一些问题:

正如您所说，指令中的 claimKeys 应该是 claim-keys

它的绑定(bind)应该是'<'(单向绑定(bind))或'='(双向绑定(bind))，而不是'@'，它只是传递给指令在引号之间找到的字符串

在您的指令 Controller 中 var vm = this;应该在上面
$onInit 函数而不是它内部(范围不同)

resolve.claimkeys应该返回 $http 的 promise ，而不仅仅是调用
它

claimKeys 应该被路由器的 Controller 作为注入(inject)接收并传递给它的模板

controllerAs: '$resolve'应该被路由器使用

app.component('myfirstcomponent', {
  bindings: {
    'claimKeys': '='
  },
  template: 'components/component.html',
  controller: function() {
    var vm = this;
    this.$onInit = function() {            
      console.log(vm.claimKeys);
    };
  }
});

app.config(function ($stateProvider) {
  $stateProvider.state('myfirstcomponent', {
    url: '/myfirstcomponent',
    template: '<myfirstcomponent claim-keys="$resolve.claimKeys"></myfirstcomponent>',
    resolve: {
      claimKeys: ['$http', function($http) {
        return $http.get('claimkeys.json').then((response) => {
          return response.data.DATASET.TABLE;
        });
      }]
    },
    controller: function (claimKeys) {
      this.claimKeys = claimKeys;
    },
    controllerAs: '$resolve'
  })
});

笨蛋: http://plnkr.co/edit/Nam4D9zGpHvdWaTCYHSL?p=preview ，我在这里使用 .state 而不是 .when 进行路由。