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'