ui-router uiOnParamsChanged 项目优化

angularjs 组件化（component）开发模式下，使用ui-router 作为切换路由，当路由切换时组件模板会重新渲染加载，页面出现跳动，并且每次都得重新渲染模板，这样着实影响项目性能。在官网查到uiOnParamsChanged 这个方法可以有效解决模板每次渲染的问题，它可以监控url 上参数的变化来重新请求数据再替换到界面，而不用重新加载一遍组件，效率提升，并界面不会出现抖动。

使用条件：

1. 同一状态下参数发生变化

2. 参数必须提前定义到url 上

3. 设置dynamic=true，即使用动态参数（reloadOnSearch=false，高版本已弃用）

4. 定义uiOnParamsChanged 方法，在此方法里处理参数变换后的数据请求

# 与ng-table 结合使用刷新后参数有回归到初始值，经排查发现，ng-table getData模式每次初始化都会请求默认参数，所以要将改变后的参数赋值到ng-table 再次初始化时的默认参数

.state('home.user-groups.list', {
    url: '/user-groups/list?pager.keyword&page&count',    //刷新后能保持当前状态
    params:{    //参数默认值设置
        page:'1',
        count:'10',
        'pager.keyword':null
    },
    component: 'userGroupsList',
//    reloadOnSearch: false,    //高版本已弃用
    dynamic:true,    //启用动态参数
    lazyLoad: function($transition$){
        //加载对应的组件
        return $transition$.injector().get('$ocLazyLoad').load('user-groups/list/component');
    }
})

//监控参数动态变化
this.uiOnParamsChanged = function(changeParams) {
    console.log("new params: ", changeParams);
    angular.extend($state.params,changeParams);
    instance.tableParams.parameters(changeParams)
};
//将变化后的参数赋值给ng-table默认参数
ngTableDefaults.params = {
        page:Number($state.params['page']),
        count:Number($state.params['count']),
        'pager.keyword':$state.params['pager.keyword']
};
this.tableParams = new NgTableParams({},{
    $loading:true,
    counts:[],
    getData:function(params){
//        console.log(params.url());
//        $location.search(params.url());    //直接修改地址栏参数，刷新后会出现地址栏闪烁
        $state.go($state.current.name,params.url());    //参数的变化其实就是状态变更
        return userGroupsService.get(params.url()).$promise.then(function(resp){
            params.total(resp.data.pager.total);
            return resp.data.pager.data;
        });
    }
});

 

转载于:https://www.cnblogs.com/liboo/p/9633038.html