组件中的角度解析答案

【问题标题】：Angular resolve in component组件中的角度解析
【发布时间】：2017-06-01 15:52:53
【问题描述】：

我有一个 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);
         ...
    }
}

订单服务：

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

附：当我在控制器构造函数中调用 console.log(this.order,this) 时，我发现了一些奇怪的行为。
它打印到控制台

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

【问题讨论】：

能否提供OrdersService.get和控制器的实现？

标签： javascript angularjs angular-ui-router components

【解决方案1】：

在official documentation中有描述：

您可以使用resolve 为您的控制器提供内容或数据这是国家的习惯。 resolve 是可选映射应该注入控制器的依赖项。

所以你需要在ui-router状态的控制器中注入order。

【讨论】：

注入组件控制器会产生Unknown provider: orderProvider <- order 错误，当通过绑定将数据传递给组件时，注入状态控制器不会产生任何结果
正确。由于没有order 服务，注入组件控制器将不起作用。如果您注入到状态控制器中，请将行 this.order = order 添加到构造函数中，以通过绑定使数据可用于组件。请参阅下面的答案。
我已经更新了我的答案，您需要在ui-router状态'route'的控制器中注入order，然后将其传递给指令的控制器。
@ByronJones @Andrea，不幸的是这不起作用，我将order注入状态控制器，然后通过绑定到组件，不知何故它在控制器template: '<update order="resCtrl.order"></update>',controller: function( order ) {中仍然不可用this.order = order;},controllerAs: 'resCtrl',resolve: { ... }
@Onefivefournine，我猜你的控制器/组件仍有问题；查看我的更新答案。

【解决方案2】：

您观察到的行为是有道理的。您的console.log 调用在控制器的构造函数中，并且您没有提供Angular 可以用来注入order 的参数，从而使构造函数可用。

Angular 实际上是在更新控制器之前解析order，但在控制器对象存在之前它不能将 $resolve.order 添加到控制器。所以order不会在构造函数中存在，而是在渲染模板之前就存在。

您的 OrdersService 也有问题。你的get 函数永远不会传递id 参数（它传递orderId，它没有在你的路由中定义）。很可能，您的 API 永远不会被正确调用。把参数对象改成{id: orderId}，你的状态应该不错了。

【讨论】：

哦，这只是一个错字。我在放这里之前简化了代码

【解决方案3】：

在这里找到答案
How to wait for binding in Angular 1.5 component (without $scope.$watch)

我应该只使用 $onChanges 挂钩来等待 promise 解决

【讨论】：