URL路由到子视图

URL Routing to Child View

本文关键字：视图 路由 URL      更新时间：2023-09-26

我设置了一个父视图和多个子视图，它似乎在应用程序中工作没有问题。问题是如果您刷新页面或尝试使用适当的url直接转到子视图。

这里是我正在加载的状态。这是父状态:

{name: "myTeam", url: "/myTeam", template: "<my-team></my-team>"}

这是其中一个孩子:

{name: "myTeam.info", url: "/info", template: "<my-team.info></my-team.info>"}

这是另一个:

{name: "myTeam.checkin", url: "/checkin/{book}/{club}/{team}/{bus}", template: "<my-team.checkin></my-team.checkin>"}

所以，如果我访问Info视图，它会正确加载模板并将url设置为"/myTeam/Info "。如果尝试刷新页面或者只是从url "/myTeam/info"开始，它不会加载state/模板。

我在angular-ui-router.js(0.1.2版本)中添加了代码来尝试调试。我在912行添加了console.log()行。

UrlMatcher.prototype.exec = function (path, searchParams) {
  var m = this.regexp.exec(path);
  console.log("  -->  " + this.regexp + " -- " + path + " = " + m);
  if (!m) return null;
  searchParams = searchParams || {};

输出如下:

  -->  /^'/myTeam'/?$/ -- /myTeam/info = null
  -->  /^'/info(.*)?'/?$/ -- /myTeam/info = null
  -->  /^'/checkin'/([^'/]*)?'/([^'/]*)?'/([^'/]*)?'/([^'/]*)?(.*)?'/?$/ -- /myTeam/info = null

它在父结点和子结点上都不匹配。

我遵循嵌套状态和嵌套视图的例子。他们的网址看起来都一样。

我不知道它有什么不同，但我使用UI额外的加载这些作为未来的状态，并使用ocLazyLoad.

关于如何让URL工作的任何想法?或者，它应该如何工作?

我最终确定问题出在UI Extras和未来状态加载上。

为了时间的缘故，我最后选择了一条轻松的路。我改变了我的项目，不使用任何子状态，这就解决了我的问题。

据我所知，它并没有加载所有的子状态。未来的状态加载器只匹配父节点并加载父节点。

我认为我的问题与我在这里发现的问题相似:UI Router extra Issue #63

我试图在我的未来状态加载器中编写代码，以加载父状态及其所有子状态。这迫使我不得不修改UI Router Extras来接受一系列的承诺，我不得不修改太多的东西来使它工作。

希望在某个时候，我可以尝试在我的项目之外构建一个更完整的修复并贡献它，但现在，我的解决方案是避免子状态。

奇怪，我的项目有子状态，有些子状态也有更多的子状态，它工作得很好，没有问题，我将向你展示我如何设置我的url:

dashboardState.js

状态与url: ''是主页，它是加载时，你导航到url/home，但他们的孩子home加载在仪表板。

(function () {
    'use strict';
    angular
        .module('myapp')
        .config(dashboardStates);
    function dashboardStates($stateProvider) {
        var dashboard = {
            name: 'dashboard',
            abstract: true,
            url: '/home', // view inicial abaixo
            templateUrl: 'app/components/Dashboard/view/dashboard.html',
            controller: 'DashboardController',
            controllerAs: 'dashboard'
        };
        var dashboardHome = {
            name: 'dashboard.home',
            url: '',
            parent: 'dashboard',
            templateUrl: 'app/components/Dashboard/view/dashboard.home.html',
            controller: 'DashboardController',
            controllerAs: 'home',
            ncyBreadcrumb: {
                label: 'Home'
            }
        };

        // states
        $stateProvider
            .state(dashboard)
            .state(dashboardHome);
    }
}());

和下面的状态加载在仪表板视图中:

profileState.js 

(function () {
    'use strict';
    angular
        .module('myapp')
        .config(profileStates);
    function profileStates($stateProvider) {
        var profile = {
            name: 'dashboard.profile',
            url: '/profile',
            templateUrl: 'app/components/Profile/view/profile.html',
            controller: 'ProfileController',
            controllerAs: 'profile'
        };
        var profileEdit = {
            name: 'dashboard.profile.edit',
            url: '/edit',
            templateUrl: 'app/components/Profile/view/profile.edit.html',
            controller: 'ProfileController',
            controllerAs: 'profile'
        };
        $stateProvider
            .state(profile)
            .state(profileEdit);
    }
}());

更多信息:https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

相关文章：