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

Angular UI-Router $ urlRouterProvider。不工作时*不再*

何飞翰
2023-03-14
问题内容

问: 为什么不能在.when()我的$urlRouterProvider工作了吗?

我选择了一个相当强大的角度应用程序。我一直试图解决的最新问题是“页面刷新时丢失的用户凭据”问题。

当我拿起项目的auth服务时,并没有多大意义,在深入研究后,我发现它是从几页随机代码中组合而成的。它也不能完全正常工作,因此我研究了不同的来源,并决定完全实现其中之一(angular-client-side-auth)

现在,我实现的身份验证服务/控制器与 angular-client-side-auth
基本上相同,但是我正在工作的站点使用基于令牌的身份验证。令牌功能基本上已经就位,因此我可以轻松使用它。

在这一点上,我已经使用户保持刷新状态登录,路由正在与它们的身份验证一起使用(以前使用大容量代码来禁用视图中的元素),但是现在$urlRouterProvider .when()s已损坏。他们以前工作得非常好,所以我知道我做过的事情就是要犯错-但我不能简单地撤消已实现的事情!

这是我正在使用的$ urlRouterProvider代码。值得一提的是,我已经包含/需要了.when(),而angular-client-side-auth似乎并没有使用它们。我希望它们可以用该代码实现,但是可能其中有些东西使.when()?的功能无效。我不这么认为。可能还需要澄清,我还没有使用.rule$httpProvider.interceptors。我尝试使用已实现这些功能的网站,但它们似乎没有什么不同。

$urlRouterProvider
   .when('/myState/group', ['$state', 'myService', function ($state, myService) {
            $state.go('app.myState.group.id', {id: myService.Params.id});
   }])
   .otherwise('/');

因此,基本上,如果用户或站点将用户定向到/myState/group,则他们实际上应该以状态app.myState.group.id正确的URL结尾?他们没有,但我不知道为什么。关于使用urlRouterProvider的问题并没有太多。

什么 没有 发生?好了,/myState/group加载视图很好,并且在其中<ui-view>是生成的列表id。您可以单击一个ID,该ID会调用一个函数,该函数设置ID然后执行$state.go('app.myState.group.id',{id: group.id, std: $scope.std1}); 。当然,该状态将替换用户单击的“生成列表”。

现在,对于.state()

.state('app.myState', {
            abstract: true,
            url: '/myState',
            templateUrl: 'views/myState.html',
            data: {
                access: access.user
            },
            controller: 'MyCtrl',
            resolve: {
                // bunch of stuff here, I'll include it if it's relevant                    
            },
            redirectMap: {
                '409': 'app.error'
            }
        })
        .state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            }
        })
        .state('app.myState.group.id', {
            url: '/:id',
            templateUrl: 'views/myState.group.id.html',
            data: {
                access: access.user
            },
            resolve: {
                '': function (myService) {
                    myService.stuff.get(false, false, 7, 0).then(function (data) {
                    });
                }
            },
            controller: 'MygroupidCtrl'
        })

最后, index.html

<li ng-class="{active: $state.includes('app.myState')}"> <a ui-sref="app.myState.group">My State</a> </li>

不知何故,我觉得有一种更好的方法来构造它。据我所知,app.myState.group实际上并不需要 ,它只是嵌套的一部分。

我试图将更ui-sref改为="app.myState.group.id"。如果那没用,我也改成$state.includes('app.myState')}$state.includes('app.myState.group')}。不。这可行吗?我知道我必须以某种方式传递ID,但似乎并没有指示。

理想情况下,我想限制不必要状态的数量(以及控制器..以及所有内容)。由于用户应该/myState/group/id在单击链接时直接被带到,因此我认为那应该发生。这不是链接到另一个状态,然后重定向!

就是说,我更关心现在只是使它工作,而以后我会担心清理。

编辑

因此,当我写问题时,我对尝试的事情有了更多的想法。其中之一实际有效!

.state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            },
            onEnter: ['$state', '$timeout', 'myService', function ($state, $timeout, myService) {
                $timeout(function () {
                     $state.go('app.myState.group.id', {id: myService.Params.id})
                }, 1000);
            }]

我喜欢它,尽管我仍然想知道是否还有其他方法可以做到这一点。我也很好奇为什么$ urlRouterProvider停止工作!


问题答案:

编辑:版本0.2.13-重大更改

原始帖子正在使用UI-Router 0.2.12-。0.2.13中的修复程序禁用了此解决方案。请在此处遵循解决方法:

Angular UI-Router $ urlRouterProvider。当我单击时不起作用

原版的:

我发现有一个问题,引起了类似的问题。有一个带有完整代码的有效示例

首先,让我们有两个功能来配置

  • $urlRouterProvider
  • $stateProvider

这些定义的摘要:

// when config for $urlRouterProvider
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];

// state config for $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {

  $stateProvider
    .state('app', {
        url: '/app',
        ...
}];

有了这个,如果我们这样称呼他们,举报的行为就会停顿:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig)

上面的调用将不起作用。访问列表时,何时将不会触发详细信息状态。

但这将按预期工作:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly WHEN
.config(whenConfig) 
// II. only then call state config
.config(stateConfig)

在这里检查。查看 app.js文件…

简介:我们只需要首先配置$urlRouterProvider。只有这样我们才能开始通过填写我们的州$stateProvider。这种方法将导致预期的行为。



 类似资料:
  • 问题内容: 我在我的角度web应用程序。 当我在浏览器中键入内容时,它会重定向到我期望的位置,但是当我单击时,它不会重定向,而是停留在url上。 我的控制台没有错误,我也不知道为什么。 当不再工作时 我在这里看到了一个类似的问题AngularUI-Router$urlRouterProvider。我尝试了答案,但它仍然对我不起作用。 这是我的coffeescript代码: 问题答案: 先前的解决方

  • 我想在菜单栏文本被选中时更改它的颜色。 这里可能出了什么问题? 我尝试使用伪类':active',但没有得到应用。其中as':Hover'正在工作。 我还尝试使用'Router LinkActive',它应该添加类'Active-Link',但这也不起作用。 我在下面给出了HTML、SCCS和TS代码:

  • 刷新第页时未找到以下代码报告404http://localhost/about.但如果将browserHistory更改为hashHistory,它就可以正常工作。 这是我的js文件。 和html文件。

  • 我完全卡住时集成HOC在我的react.js项目。 这是我的路线文件 我对此完全崩溃了,但没有摆脱那个问题。为什么我的控制台中的不显示值 有任何问题与反应和反应路由器的版本 提前谢谢你!!!

  • 关于未解决的问题(作为最终结论) react路由器dom v4中的多个嵌套路由 如何在React路由器v4中嵌套路由 我也有同样的问题。 https://reacttraining.com/react-router/web/guides/quick-start促进react-router-dom 此外,人们发现最好在一个文件中列出路由,而不是在组件内部。 有人提到:https://github.c