コンポーネントの角度分解

Question

私はいくつかのデータを解決する必要があるui.router状態を持っていますが、コントローラをロードしてからテンプレートをロードする前に解決するようです。

状態の定義は次のようになります。

$stateProvider 
     .state('route', { 
      url: '/update/:id', 
      template: '<update order="$resolve.order"></update>', 
      resolve: { 
       order: function(OrdersService, $stateParams) { 
        return OrdersService.get($stateParams.id).$promise 
       } 
      } 
     }) 

コンポーネント：

const Update = { 
    bindings: { 
     order: "<" 
    }, 
    controller, 
    template 
}; 

angular.module('app') 
    .component('update', Update); 

コントローラー：

export default class UpdateCtrl { 
    constructor(){ 
     ... 
     console.log(this.order); 
     ... 
    } 
} 

OrdersService：

class OrdersService { 
    constructor($resource, api_name) { 
     this.$resource = $resource(api_name + '/orders/:id', { id: '@id' }, { 
      get: { method: 'GET' } 
     }); 
    } 
    get(orderId) { 
     return this.$resource.get({ orderId }); 
    } 
} 
angular.module('app') 
    .factory('OrdersService', [ 
     '$resource', 
     'api_name', 
     ($resource, api_name) => new OrdersService($resource, api_name) 
    ]); 

すべての輸入は大丈夫です、と私はまだ、コントローラから、次の取得、およびテンプレート

console.log(this.order) // undefined 

P.S.で完全なデータコントローラのコンストラクタでconsole.log(this.order,this)を呼び出すと、私はいくつかの奇妙な動作を見つけました。
それは

undefined OrderUpdateCtrl 
      $stateParams:Object 
      OrdersService:OrdersService 
      order:Resource // full resolved object 
      __proto__:Object 

Answer 1

がofficial documentationに記載されているコンソールに出力します。

あなたは状態にカスタムされたコンテンツやデータ を使用してコントローラを提供するために、resolveを使用することができます。 resolveはコントローラに注入する必要がある 依存関係のオプションのマップです。

したがって、orderをui-router状態のコントローラに注入する必要があります。

Answer 2

あなたが観察している動作は意味があります。 console.log呼び出しはコントローラのコンストラクタの内側にあり、Angularがコンストラクタで使用できるように、orderを挿入するために使用できる引数は提供しません。

Angularは実際にコントローラを新規に作成する前にorderを解決していますが、コントローラオブジェクトが存在するまで$ resolve.orderをコントローラに追加することはできません。したがってorderはコンストラクタ関数には存在しませんが、テンプレートをレンダリングする前に存在します。

OrdersServiceにも問題があります。 get関数はidパラメータを渡すことはありません（経路に定義されていないorderIdを渡します）。おそらく、APIが正しく呼び出されることはありません。パラメータオブジェクトを{id: orderId}に変更して、適切な形にする必要があります。

Answer 3

見つかり答えここ
How to wait for binding in Angular 1.5 component (without $scope.$watch)

私はあなたが `OrdersService.get`とコントローラの実装を提供してくださいすることができ、単に約束を