角度コンポーネントバインディング定義されていません

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バインディング）を使用しますが、ディレクティブに渡す '@'ではなく、引用符で囲まれた文字列
• ディレクティブのコントローラvar vm = this;は $ onInit機能はない（スコープが異なる）
• resolve.claimkeys $ HTTPの約束を返す必要がありますだけではなく、呼び出し、その中 それ
• そのテンプレートに注射などのルータのコントローラによって受信され、渡されるべきclaimKeys

• 、http://plnkr.co/edit/Nam4D9zGpHvdWaTCYHSL?p=preview：controllerAs: '$resolve'は

plunkerルータ

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

で使用する必要があります私はここで。状態を使用し、ではなくをルーティングに使用しました。