当前位置: 首页 > 面试题库 >

Angular UI路由器无法解析注入的参数

侯向文
2023-03-14
问题内容

因此,请考虑我的angularUI路由设置中的以下片段。我导航到路线/ category / manage / 4 /
details(例如)。我希望可以在相关的控制器加载之前解决“类别”问题,实际上是可以在我可以从类别服务返回类别的resolve函数中放置一个断点,并查看类别是否已返回的事实。现在在控制器本身内部放置另一个断点,我可以看到“类别”始终是未定义的。它不是由UI路由器注入的。

谁能看到这个问题?它可能不在我提供的代码中,但在运行代码时没有错误,因此无法确定问题的根源在哪里。典型的js静默失败!

        .state('category.manage', {
            url: '/manage',
            templateUrl: '/main/category/tree',
            controller: 'CategoryCtrl'
        })
        .state('category.manage.view', {
            abstract: true,
            url: '/{categoryId:[0-9]*}',
            resolve: {
                category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
                    return CategoryService.getCategory($stateParams.categoryId).then(returnData); //this line runs before the controller is instantiated
                }]
            },
            views: {
                'category-content': {
                    templateUrl: '/main/category/ribbon',
                    controller: ['$scope', 'category', function ($scope, category) {
                        $scope.category = category; //category is always undefined, i.e., UI router is not injecting it
                    }]
                }
            },
        })
            .state('category.manage.view.details', {
                url: '/details',
                data: { mode: 'view' },
                templateUrl: '/main/category/details',
                controller: 'CategoryDetailsCtrl as details'
            })

问题答案:

这个概念正在奏效。我在这里创建了工作的plunker。更改在这里

代替这个

resolve: {
    category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
        //this line runs before the controller is instantiated
        return CategoryService.getCategory($stateParams.categoryId).then(returnData); 
    }]
},

我刚刚返回了getCategory的结果…

resolve: {
    category: ['CategoryService', '$stateParams', function (CategoryService, $stateParams) {
      return CategoryService.getCategory($stateParams.categoryId); // not then
    }]
},

使用朴素的服务实现:

.factory('CategoryService', function() {return {
  getCategory : function(id){
    return { category : 'SuperClass', categoryId: id };
  }
}});

即使那是一个承诺…解决将一直等到它被处理…

.factory('CategoryService', function($timeout) {return {
  getCategory : function(id){
    return $timeout(function() {
        return { category : 'SuperClass', categoryId: id };
    }, 500);
  }
}});


 类似资料:
  • 问题内容: 我已经尽一切努力让ui路由器解析将其值传递给给定的控制器AppCtrl。我正在使用依赖注入,这似乎引起了问题。我想念什么? 路由 控制者 编辑 这是一个小家伙http://plnkr.co/edit/PoCiEnh64hR4XM24aH33?p=preview 问题答案: 在将路由解析参数用作绑定到该路由的控制器中的依赖项注入时,由于名称不存在的服务提供程序,因此不能将该控制器与ng-

  • 我有一个Angular2项目2.0.0,在试图加载该项目时,浏览器中出现了以下错误: 误差 Metadata_Resolver.js:508未捕获错误:无法解析CustomerService:(AngularFireDatabase,?,Token_FirebaseApp)的所有参数。(…)CompileMetadataResolver.getDependenciesMetadata@metada

  • 注解路由 新版本提供了一种最简单的路由注册方法(可以完成基本的路由定义),默认关闭,如果需要开启在应用的app.php配置文件中设置: // 使用注解路由 'route_annotation' => true, 然后只需要直接在控制器类的方法注释中定义(通常称之为注解路由),例如: <?php namespace app\index\controller; class

  • 我一直在尝试模块化我的React.js应用程序(它将作为带有Electron的桌面应用程序提供),如果我将来制作一个新模块,我只需添加一个新文件夹和修改几个文件,它就可以很好地集成。我最初受到这篇文章的启发:https://www.nylas.com/blog/react-plugins/ 在那之后,我开始尽可能多地研究,并最终创建了一个JSON文件,该文件将保存在服务器中,其中包含为特定客户机注

  • 问题内容: 我正在使用AngularUI路由器,并且试图建立嵌套/子链接。 一切正常,但是如何在“联系人”选项卡中选择/激活链接? 基本上,我需要能够在加载“联系人”页面时选择/激活一个联系人链接。当前,由于某些原因,除非我单击链接,否则它不会阅读。 柱塞:http ://plnkr.co/edit/DWjp5M6kJt2MyBrasfaQ?p=preview 问题答案: 有一种更快的方法可以做到

  • 使用redux和反应路由器,我想访问路由指定的组件以外的组件上的路由参数。 我已经对react-router、redux和react-router-redux进行了如下设置,我想从我的redux存储访问reportId参数。 我已经尝试连接react-redux路由器来存储路由状态,但是我发现除了活动路由的完整路径之外,redux内部没有任何有用的存储。这让我可以选择从redux中的路径解析出re