angular中的三层嵌套url

three level nested url in angular

本文关键字：三层 嵌套 url angular      更新时间：2023-09-26

这是我的app.js 

 .state('dashboard', {
            url: '/dashboard',
           templateUrl : 'resources/components/dashboard/dashboard.html',
            controller : 'dashboardController',   

        }).state('dashboard.profile', {
            url: '/profile',
           templateUrl : 'resources/components/clinicprofile/profile.html',
            controller : 'profileController',

        }).state('dashboard.setting', {
            url: '/setting',
           templateUrl : 'resources/components/setting/settings.html',
            controller : 'profileController',
        }).state('dashboard.setting.user', {
            url: '/user',
           templateUrl : 'resources/components/setting/user.html',
            controller : 'profileController',

请注意，我的三级嵌套url工作正常，当我把ng-view在设置。html页面但是当用户在

上时，我不想显示setting。html的内容
dashboard/setting/user

显示设置页面内容和用户页面内容

当用户在用户页面

时，我不想显示setting.html的内容

我想只显示这个url上的用户内容dashboard/setting/user我怎么能做到这一点?

如果您不希望用户页面包含在设置页面中，则它不能是设置的子页面，因此可能的解决方案是使用抽象状态并将设置URL更改为类似setting/main:

的内容。
.state('dashboard', {
        url: '/dashboard',
        templateUrl: 'resources/components/dashboard/dashboard.html',
        controller: 'dashboardController',   
    }).state('dashboard.setting', {
        abstract: true,
        url: '/setting',
        template: '<ui-view></ui-view>',
    }).state('dashboard.setting.main', {
        url: '/main',
        templateUrl: 'resources/components/setting/settings.html',
        controller: 'profileController',
    }).state('dashboard.setting.user', {
        url: '/user',
        templateUrl : 'resources/components/setting/user.html',
        controller : 'profileController',
    })

UI Router文档

相关文章：