Angular ui-router子视图问题-Java 学习之路

我一直在和Angular合作一年或两年，但这是我第一个使用ui-router的项目 . 我遇到了一些关于视图和子视图的问题 . 该应用程序是标准的左侧菜单栏，右侧的视图根据菜单栏中单击的内容而变化 .

在index.html上

<body>
    <div ui-view></div>
</body>

在config.js文件中，它定义了路由

.state("dashboard", {
        url: "/dashboard",
        templateUrl: "components/dashboard/dashboard.html",
        data: {
            pageTitle: "Dashboard",
            requiresLogin: false
        }
    })

    .state("dashboard.welcome", {
        url: "/welcome",
        templateUrl: "components/welcome/welcome.html",
        data: {
            pageTitle: "Welcome",
            requiresLogin: false
        }
    })

在dashboard.html文件中

<div class="dashboard">
    <div class="container-fluid">
     <div class="row">
      <div class="col-xs-12 col-md-8">
       <div ui-view>

/dashboard 路径正确加载，并将加载左侧导航栏，右侧为空白 . 但是将状态更改为 dashboard.welcome （ /welcome ）将不会加载welcome.html模板 .

3 回答

1
每当使用 ui-router 时，您需要了解状态的概念与路径不同 . 定义子状态时，它相对于其父状态定义 . 在您的方案中， dashboard.welcome 被定义为子状态 dashboard . 到子状态的路由是相对于父级的，并且是 {parent url}/{child url} . 因此，您应该使用以下2中的任何一个来路由到该状态：

Using $state.go change the state by specifying state name
```
$state.go('dashboard.welcome');
```
Using $location.path change the route by specifying url
```
$location.path('/dashboard/welcome');
```
回复于 2024-05-12T16:00:35+08:00
0

听起来你想要 /welcome 的链接用于状态 dashboard.welcome . 这是一个了解如何做到这一点的人 . 我展示了两套仪表板和欢迎状态 . 第一组状态（仪表板和欢迎）显示 /dashboard/welcome 将带您进入 dashboard.welcome 状态 .

第二组（dashboard2和welcome2）显示 /welcome 将进入 dashboard2.welcome2 状态 . 我相信这就是你要找的东西 .

如果将鼠标悬停在链接上，您可以看到他们将带您去哪里 .

https://plnkr.co/edit/AVKPFa?p=info

回复于 2024-05-12T16:00:35+08:00

ui-router中的嵌套路由获取嵌套URL . 但是我建议使用命名视图来实现这种结构 . 你可以在这里找到更多关于它的信息：

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

它的要点是：您可以为左侧菜单导航指定一个命名组件（ui-view），为内容指定另一个组件（ui-view），这样可以更好地控制该行，因为命名组件可以在子状态中被覆盖，或者它们可以保留默认模板，具体取决于您的需求 .

例：

.state('root', {
            url: '',
            abstract: true,
            views: {
                'header': {
                    templateUrl: 'templates/partials/header.html',
                    controller: 'headerCtrl'
                },
                'logo': {
                    templateUrl: 'templates/partials/logoView.html'
                },
                'footer':{
                    templateUrl: 'templates/partials/footer.html',
                    controller: 'footerCtrl'
                }
            }
        })
        .state('root.login', {
            url: '/login',
            views: {
                'header@': {
                    template: ''
                },
                'container@': {
                    templateUrl: 'templates/login.html',
                    controller: 'loginController'
                }
            }
        })
        .state('root.report', {
            url: '/report',
            views: {
                'container@': {
                    templateUrl: 'templates/eu_dashboard.html',
                    controller: 'reportController'
                }
            }
    })

在你的index.html中：

<div ui-view="logo"></div>
<div ui-view="header"></div>
<div id="mainView" ui-view="container"></div>
<div ui-view="footer"></div>

回复于 2024-05-12T16:00:35+08:00

Angular ui-router子视图问题

3 回答

相关问题