javascript - 在同一 Controller 中处理不同的routeParams

我有一个控制器，每个不同的路由传递不同的参数。我的routes.js文件看起来像这样-

.when('/event/:eid/edit-question/:qid', {
            templateUrl: 'views/edit-question.html',
            controller: 'eventController',
            controllerAs: 'eventCtrl',
            resolve: {
                "check": function (authService, $location) {
                    if (!authService.isLoggedIn()) {
                        $location.path('/login');
                    }
                },
                "params": function ($route) {
                    return $route.current.params;
                }
            }
        })
        .when('/event/edit-event/:eid', {
            templateUrl: 'views/edit-event.html',
            controller: 'eventController',
            controllerAs: 'eventCtrl',
            resolve: {
                "check": function (authService, $location) {
                    if (!authService.isLoggedIn()) {
                        $location.path('/login');
                    }
                },
                "params": function ($route) {
                    return $route.current.params;
                }
            }
        })

我在加载控制器之前解决了路由参数。
我的控制器功能看起来像这样-

myApp.controller('eventController', ['$location','$rootScope', 'params', 'authService', 'apiService', function ($location,$rootScope, params,authService, apiService) {
 let dash = this;
//all the route parameters will be resolved and stored here
 dash.params = params;
 //get the details of an event
    dash.getTheEventDetail = () => {
        apiService.getEventDetail(dash.params.eid).then(function successCallBack(response){
           console.log(dash.params.eid);
            dash.eventDetail = response.data.data;
        });
    }
    dash.getTheEventDetail();

    //get the detail of a question for the qid passed as parameter

    dash.viewQuestion = () => {
        console.log(dash.params.qid);
        console.log(dash.eventDetail);
        dash.questionDetail = dash.eventDetail.questions.filter(question => question._id === dash.params.qid);
        console.log(dash.questionDetail);
    }

当我尝试访问路由/ event /：eid / edit-question /：qid时，由于dash.eventDetail仍未定义，因此viewQuestion函数在getTheEventDetail之前执行
像这样在控制器的初始化中在编辑问题视图中调用viewQuestion。

<div ng-init="eventCtrl.viewQuestion()"></div>

可以采取某些解决方法，例如在getTheEventDetail（）的末尾调用viewQuestion函数，但这会导致每次调用getTheEventDetail时都会调用viewQuestion。在这种情况下，有没有一种很好的方法来处理routeParams。

最佳答案

为什么不在控制器中使用$ routeParams服务呢？看来viewQuestion取决于成功运行并设置eventDetail的apiService的getEventDetail方法。如果是这种情况，请删除ng-init命令，然后将视图问题添加到您的回调中，以确保在对尚不存在的数据调用方法之前确保诺言已经完成。另外，filter返回一个数组，由于您是按ID进行搜索，因此我假设您可能只想问一个问题而不是数组。如果正确，则可能需要在末尾指定[0]并为其编制索引，或者改为使用Array.find。

我不确定您要寻找的结果到底是什么，但是我在下面粘贴了一个可能的解决方案（当然是未经测试的）。希望能有所帮助。

myApp.controller('eventController', ['$location','$rootScope', routeParams', 'authService', 'apiService',
    function ($location,$rootScope, $routeParams,authService, apiService) {
     let dash = this;

     //get the details of an event
        dash.getTheEventDetail = () => {
            apiService.getEventDetail(dash.params.eid)
                .then(response => {
                    dash.eventDetail = response.data.data;
                    if ($routeParams.qid) {
                        dash.viewQuestion()
                    }
            });
        }
        dash.getTheEventDetail();

        //get the detail of a question for the qid passed as parameter

        dash.viewQuestion = () => {
            dash.questionDetail =
                dash.eventDetail.questions.filter(question => question._id === $routeParams.qid);
            console.log(dash.questionDetail);
    }
}

关于javascript - 在同一 Controller 中处理不同的routeParams，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50274328/