Question

我一直在升级一些有角度的东西，并决定我可能想使用状态和组件来做列表/详细视图。

我有一个像这样定义的状态。我知道clientsService，这是$资源的工作原理。我可以var d = clientsService.list（）。$ promise; d.then（function（r）{console.log（r.data）;};并获取一组客户端。我的问题似乎是没有渲染相关的组件。客户端应该在我的SPA index.html页面中呈现

我的角度版本是1.6.4。我在这里按照教程https://ui-router.github.io/ng1/tutorial/hellosolarsystem但是我被卡住了。有什么理由不行吗？

//States:
$stateProvider
.state('clients', {
        url: '/clients',
        component: 'clients',
        resolve: {
            clients : function(clientsService) {
                return clientsService.list().$promise;
            }

        }
});

//Component
hiamsApp.component('clients', {
bindings: {clients: '<'},
template: '<h3 style="top-margin:10px;">Some Clients:</h3>' +
          '<ul>' +
          ' <li ng-repeat="client in $ctrl.clients">' +
          '     <a ui-sref="client({clientId: client._id})">' +
          '         {{client.firstName}}' +
          '     </a>' +
          ' </li>' +
          '</ul>',  
});

的index.html

    <div class="container-fluid">
        <ui-view></ui-view>
    </div>

为了完整性，这里是我的资源。

hiamsApp.factory('clientsService', ['$resource', 'authenticationInterceptor', function($resource, authenticationInterceptor){
return $resource('/api/client', 
    {},
    {
        'query': {method: 'GET', url: '/api/client', isArray: true, interceptor: authenticationInterceptor},
        'list': {method: 'GET', url: '/api/clients', isArray: true, interceptor: authenticationInterceptor},
        'update': {method: 'PUT', interceptor: authenticationInterceptor}
    }
);
}]);

更改了我的州名和组件名称。仍然没有去。给了这个更多的想法。视图仅在解析完成后呈现。也许这个决心有问题？

//States:
$stateProvider
.state('clients', {
    url: '/clients',
    component: 'myclients',
    resolve: {
        allClients : function(clientsService) {
            return clientsService.list().$promise;
        }

    }
});

//Component
hiamsApp.component('myclients', {
bindings: {allClients: '<'},
template: '<h3 style="top-margin:10px;">Some Clients:</h3>' +
      '<ul>' +
      ' <li ng-repeat="person in $ctrl.allClients">' +
      '     <a ui-sref="person({clientId: person._id})">' +
      '         {{person.firstName}}' +
      '     </a>' +
      ' </li>' +
      '</ul>',  
});

这就是我知道我的服务返回数据的方式。

resolve: {
        allClients : function(clientsService) {
                        var d = clientsService.list().$promise;
                        d.then(function(r){
                            console.log(r.data);
                        };
                });
            return clientsService.list().$promise;
        }

    }

实际上我认为我的问题是没有一个主html页面来显示我的组件。我明天再试一次。

好吧，现在我真的被卡住了。我评论了我州的决心。我在我的组件中注释掉了绑定。只是想展示一个真正的简单。仍然没有好处。您可以将旧样式状态与templateUrl和控制器混合使用基于组件的状态吗？

这没有显示任何内容。

}).state('appointments', {
        url: '/appointments',
        templateUrl: 'appointments.html',
        controller: 'appointmentsController'
    // }).state('clients', {
    //  url: '/clients',
    //  templateUrl: 'clients.html',
    }).state('clients', {
        url: '/clients',
        component: 'clients',
        // resolve: {
        //  allClients : function(clientsService) {
        //      return clientsService.list().$promise;
        //  }
        // },
    });

hiamsApp.component('clients', {
// bindings: {allClients: '<'},
template: '<h3>Im a component</h3>'
// template: '<ul>' +
//        ' <li ng-repeat="person in $ctrl.allClients">' +
//        '     <a ui-sref="person({clientId: person._id})">' +
//        '         {{person.firstName}}' +
//        '     </a>' +
//        ' </li>' +
//        '</ul>',  
});

这确实是一些BS。花了两天时间试图让它工作，没用。

两个带有绑定但似乎不起作用的组件。

hiamsApp.component('allClients', {
bindings: {allClients: '<'},
template: '<div>' +
          '    <div>' +
          '        <h4>In Component</h4>' +
          '        <ul>' +
          '            <li ng-repeat="client in $ctrl.allClients">' +
          '                <a ui-sref-active="active" ui-sref="clients.client({ clientId: client._id })">' +
          '                    {{client.firstName}}' +
          '                </a>' +
          '            </li>' +
          '        </ul>' +
          '    </div>' +
          '    <ui-view></ui-view>' +
          '</div>', 
});

hiamsApp.component('client', {
bindings: {client: '<'},
template: '<h3>A person!</h3>' +

        '<div>Name: {{$ctrl.client.firstName}}</div>' +
        '<div>Id: {{$ctrl.client._id}}</div>' +
        '<div>Email: {{$ctrl.client.email}}</div>' +
        '<div>Address: {{$ctrl.client.address}}</div>'
});

和两个州。

}).state('clients', {
        url: '/clients',
        component: 'allClients',
        resolve: {
                     allclients: function(clientsService){
                     clientsService.query().$promise.then(function(response){
                                        //return response.data;
                                        return [{firstName : 'Gary', _id : 1, email : 'abc@dot.com', address: '123 street'}, {firstName : 'Shelly', _id : 2, email : 'xyx@dot.com', address: '456 street'}];
                                        });
                    }
                }
                }
    }).state('clients.clientlist', {
        url: '/{clientId}',
        component: 'client',
         resolve: {
                    client : function(allClients, $stateParams) {
                        return allClients.find(function(client){
                            return client._id === $stateParams.clientId;
                        });
                    }

                }
    })

我的index.html页面定义了

<ui-view></ui-view>

其他六个状态，组合templateUrl和控制器工作正常，并将模板放入，控制器工作得很好。

然而使用组件方法失败。

请帮忙吗？

Answer 1

猜测我使用了错误的ui.router版本。 0.4.2。组件路由在1。*

之前不可用

是的，使用正确版本的ui.router和组件路由10分钟就可以了。杜！

如何使Angular状态和组件绑定工作

1 个答案: