angularjs – 角UI路由器嵌套状态解决在子状态

发布时间：2020-12-17 08:38:28 所属栏目：安全来源：网络整理

导读：在一个有角度的应用程序，我正在努力，我想有一个抽象的父状态，必须解决所有的孩子的状态的某些依赖。具体来说，我想要所有需要经过身份验证的用户的状态从一些authroot状态继承该依赖关系。我遇到的问题有父依赖关系不总是重新解决。理想情况下，我想让父

在一个有角度的应用程序，我正在努力，我想有一个抽象的父状态，必须解决所有的孩子的状态的某些依赖。具体来说，我想要所有需要经过身份验证的用户的状态从一些authroot状态继承该依赖关系。

我遇到的问题有父依赖关系不总是重新解决。理想情况下，我想让父状态检查用户是否仍然自动为任何子状态登录。在docs，它说

Child states will inherit resolved dependencies from parent state(s),which they can overwrite.

我发现父依赖只有重新解决，如果我从父状态之外的状态进入任何子状态，但不是如果在兄弟状态之间移动。

在此示例中，如果您在状态authroot.testA和authroot.testB之间移动，则GetUser方法只会调用一次。当你移动到其他状态，然后回来，它会再次运行。

我可以把每个子状态的用户依赖关系，以确保方法被调用每次进入任何这些状态，但似乎破坏了继承依赖的目的。

我理解文档不正确吗？有没有办法强制父状态重新解析它的依赖关系，即使在兄弟姐妹之间的状态改变？

jsfiddle

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script>
(function(ng) {
    var app = ng.module("Test",["ui.router"]);
    app.config(["$stateProvider","$urlRouterProvider",function(sp,urp) {
        urp.otherwise("/testA");
        sp.state("authroot",{
            abstract: true,url: "",template: "<div ui-view></div>",resolve: {User: ["UserService",function(UserService) {
                        console.log("Resolving dependency...");
                        return UserService.GetUser();
                    }]}
        });
        sp.state("authroot.testA",{
            url: "/testA",template: "<h1>Test A {{User|json}}</h1>",controller: "TestCtrl"
        });
        sp.state("authroot.testB",{
            url: "/testB",template: "<h1>Test B {{User|json}}</h1>",controller: "TestCtrl"
        });
        sp.state("other",{
            url: "/other",template: "<h1>Other</h1>",});
    }]);
    app.controller("TestCtrl",["$scope","User",function($scope,User) {$scope.User = User;}]);
    app.factory("UserService",["$q","$timeout",function($q,$timeout) {
        function GetUser() {
            console.log("Getting User information from server...");
            var d = $q.defer();
            $timeout(function(){
                console.log("Got User info.");
                d.resolve({UserName:"JohnDoe1",OtherData: "asdf"});
            },500);
            return d.promise;
        };
        return {
            GetUser: GetUser
        };
    }]);
})(window.angular);
</script>
</head>
<body ng-app="Test">
    <a ui-sref="authroot.testA">Goto A</a>
    <a ui-sref="authroot.testB">Goto B</a>
    <a ui-sref="other">Goto Other</a>
    <div ui-view>Loading...</div>
</body>
</html>

我发现ui-router例外，是在你刚才描述的行为。

让我们考虑一些实体，例如联系。所以这将是很好的有一个右侧显示联系人的列表，左部分的细节。请检查The basics of using ui-router with AngularJS，以便快速了解布局。引用：

ui-router fully embraces the state-machine nature of a routing system.
It allows you to define states,and transition your application to
those states. The real win is that it allows you to decouple nested
states,and do some very complicated layouts in an elegant way.

You need to think about your routing a bit differently,but once you
get your head around the state-based approach,I think you will like
it.

好吧，为什么这一切？

因为我们可以有一个状态联系人代表一个列表。从细节的角度来说一个固定的列表。 (现在跳过列表分页过滤)我们可以单击列表，并移动到状态Contact.Detail(ID)，以查看刚刚选择的项目。然后选择另一个联系人/项目。

这里嵌套状态的优点是：

The List (the state Contact) is not reloaded. While the child state Contact.Detail is.

这应该解释为什么“奇怪”的行为应该被视为正确的。

要回答你的问题，如何处理用户状态。我将使用一些非常顶层的兄弟的路由状态，其分离的视图和控制器和一些生命周期arround …在一些周期中触发

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!