Angular UI Router嵌套状态在子状态下解析

凌景辉

2023-03-14

问题内容：

在我正在开发的一个有角度的应用程序中，我希望有一个抽象的父状态，该状态必须解析其所有子状态的某些依赖关系。具体来说，我希望所有要求经过身份验证的用户的状态都必须从某些authroot状态继承该依赖项。

我遇到了无法始终解决父依赖关系的问题。理想情况下，我想让父状态检查用户是否仍自动登录到任何子状态。在文档中，它说

子状态将从父状态继承已解析的依赖项，并可以将其覆盖。

我发现仅当我从父级以外的状态进入任何子状态时才重新解析父级依赖性，但如果在同级状态之间移动则不会。

在此示例中，如果在状态authroot.testA和authroot.testB之间切换，则GetUser方法仅被调用一次。当您移至该other状态并返回时，它将再次运行。

我能够将User依赖项放在每个子状态上，以确保每次您输入这些状态中的任何一个时都会调用该方法，但这似乎违反了继承的依赖项的目的。

我对文档的理解不正确吗？有没有一种方法可以强制父状态重新解析其依存关系，即使状态在同级之间更改也是如此？

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 与众不同的方式是您刚刚描述的行为。

让我们考虑一些实体，例如Contact。因此，最好在右侧显示我们的“联系人”列表，在左侧显示详细信息。请检查将ui-
router与AngularJS结合使用的基本知识，
以快速了解布局。引用：

ui-
router完全包含路由系统的状态机性质。它允许您定义状态，并将应用程序转换为这些状态。真正的优势在于，它可以使嵌套状态解耦，并以优雅的方式进行一些非常复杂的布局。

您需要对路由进行一些不同的思考，但是一旦您掌握了基于状态的方法，我想您会喜欢的。

好，那为什么呢？

因为我们可以有一个Contact表示List 的状态。从细节的* 角度说一个固定的清单。 （现在跳过列表分页筛选）
我们可以单击列表并移至状态，仅查看选定的项目。然后选择另一个联系人/项目。
* __Contact.Detail(ID)

这里有嵌套状态的优点：

该列表（状态Contact）是不重新加载。而子状态Contact.Detail是。

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

要回答您的问题，如何处理用户状态。我会使用某个路由状态的最高级同级，其视图和控制器处于分离状态，并存在一些生命周期…在某些周期中触发

Angular UI Router嵌套状态在子状态下解析

这里有嵌套状态的优点：

相关阅读

相关文章

相关问答

相关工具

相关文档