Question

我试图将我的第一个角度组件与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
其绑定应为'＆lt;' （单向绑定）或'='（双向绑定），但不是'@'，只是传递给指令在引号之间找到的字符串

var vm = this;

应该在上面 $ onInit 函数而不在其中（范围不同）
resolve.claimkeys应该返回$ 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 进行路由。

角度组件绑定未定义

1 个答案: