組件中的角度解析

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

PS我在控制器構造函數中調用console.log(this.order,this)時發現了一些奇怪的行為。
打印到控制台

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

Answer 1

在官方文檔中有描述：

您可以使用resolve向控制器提供針對該州定制的內容或數據。 resolve是一個可選的依賴項映射，應將其注入到控制器中。

因此，您需要在ui路由器狀態的控制器中注入order 。

Answer 2

您觀察到的行為是有道理的。 您的console.log調用位於控制器的構造函數內部，並且沒有提供Angular可用於注入order的參數，該參數可用於構造函數。

Angular實際上是在更新控制器之前解析order ，但是直到控制器對象存在之后，它才能向控制器添加$ resolve.order。 因此， order不會在構造函數存在，但渲染模板之前將存在。

您的OrdersService也有問題。 您的get函數永遠不會傳遞id參數（它會傳遞route中未定義的orderId ）。 您的API很可能永遠不會被正確調用。 更改參數對象{id: orderId} ，你應該在良好的狀態。

Answer 3

在這里找到答案
如何在Angular 1.5組件中等待綁定（沒有$ scope。$ watch）

我應該只使用$ onChanges掛鈎來等待諾言解決