angularjs - 使用路由解析路由到组件 | AngularJS

Question

在阅读文章https://ui-router.github.io/guide/ng1/route-to-component后，我​​们尝试在 AngularJS 中使用 resolve。但不幸的是，我们收到的错误如下：

未知提供者：testProvider <- test <- SaleComponentController"

有人可以帮助我们在控制器“SaleComponentController”中显示“测试”作为输出吗

angular.module('salesApp')
.config(['$stateProvider',function($stateProvider){

    $stateProvider.state('sales',{
        url: '/sales',
        data: {
            requiredAuth: true
        },
        component: 'sales',
        reloadOnSearch: false,
        views: {//default
            '@': {
                component: 'sales'
            },
            'delivery@sales': {
                component: 'delivery' 
            }
        },
        resolve: {
            test: function(){
                return "test";
            }
        }
    })
}])

.component('sales',{
    bindings: {
        items: '<',
        test: '@'  
    },
    templateUrl: 'sales/sales.html',
    controller: 'SaleComponentController'
})
.controller('SaleComponentController',
  function (SalesService, $q, $transitions,test){
    var $ctrl = this;
    console.log("test");
    console.log($ctrl.test);

});

标签： angularjsangularjs-directiveangular-ui-routerangularjs-components

Answer 1

使用单向 ( "<") 绑定声明解析器绑定：

.component('sales',{
    bindings: {
        items: '<',
        ̶t̶e̶s̶t̶:̶ ̶'̶@̶'̶
        test: '<'  
    },
    templateUrl: 'sales/sales.html',
    controller: 'SaleComponentController'
})

依赖于存在绑定的初始化逻辑应该放在控制器的$onInit()方法中：

.controller('SaleComponentController',
  ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶S̶a̶l̶e̶s̶S̶e̶r̶v̶i̶c̶e̶,̶ ̶$̶q̶,̶ ̶$̶t̶r̶a̶n̶s̶i̶t̶i̶o̶n̶s̶,̶t̶e̶s̶t̶)̶{̶
  function (SalesService, $q, $transitions){
    var $ctrl = this;
    this.$onInit = () => {
        console.log("test");
        console.log($ctrl.test);
    });    
});

有关详细信息，请参阅

• 何时使用 AngularJS `$onInit` Life-Cycle Hook