javascript - Angular ui-router 嵌套视图 - 不显示任何内容

Question

我正在尝试使用 angular ui-router 为页面实现嵌套视图，并配置了与各种教程匹配的状态定义，但尽管控制台中没有错误，但无法为子视图显示任何内容。

我正在尝试以下使用 parent.child 点表示法作为州名称：

.state('employees/employeeDetails', {
        url: '/employees/employeeDetails/:id',
        templateUrl: 'pages/employees/employeeDetails/employeeDetails.html',
        controller: 'employeeDetailsController',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/employeeDetailsController.js');
            }
        }
    })

    .state('employees/employeeDetails.mainDetailsTab', {
        url: '/employees/employeeDetails/:id/mainDetails',
        templateUrl: 'pages/employees/employeeDetails/mainDetailsTab.html',
        controller: 'mainDetailsTabController',
        resolve: {
            lazyLoad: function($ocLazyLoad) {
                return $ocLazyLoad.load('js/controllers/employees/employeeDetails/mainDetailsTabController.js');
            }
        }
    })

-

HTML：

<div id="mainContent" data-simplebar>

  <div ui-view="mainDetailsTab" id="mainTab" class="tabContent carousel-item employeeDetailsTab"></div>

  <div ui-view="paymentsTab" id="paymentsTab" class="tabContent carousel-item employeeDetailsTab"></div>

  etc...

Answer 1

不需要重新定义 url 属性的整个路径，只需要加上。

在这种情况下：url:'/mainDetails'