Angular 组件绑定未定义

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 元素。

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

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

Answer 1

一些问题：

如你所说 claimKeys 在指令中应该是 claim-keys
它的绑定应该是“<”（单向绑定）或“=”（双向绑定），而不是“@”，它只是将引号之间的字符串传递给指令
在你指令的控制器中 var vm = this; 应该在上面 $onInit 函数而不是函数内部（作用域不同）
resolve.claimkeys 应该 return $http 的承诺而不只是调用它
claimKeys 应该被路由器的控制器作为注入接收并传递给它的模板

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'
  })
});

plunker：http://plnkr.co/edit/Nam4D9zGpHvdWaTCYHSL?p=preview，我在这里使用 .state 而不是 .when 用于路由。

Angular 组件绑定未定义

Angular Component Bindings Undefined

angularjs

angular-components