Question

我已经和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模板。

Answer 1

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

使用$ state.go通过指定州名

来更改状态

$state.go('dashboard.welcome');

使用$ location.path通过指定网址

来更改路线

$location.path('/dashboard/welcome');

Answer 2

听起来您希望/welcome的链接用于州dashboard.welcome。这是一个了解如何做到这一点的人。我展示了两套仪表板和欢迎状态。第一组状态（信息中心和欢迎信息）显示/dashboard/welcome会将您带到dashboard.welcome州。

第二组（dashboard2＆amp; welcome2）显示/welcome将转到州dashboard2.welcome2。我相信这就是你要找的东西。

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

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

Answer 3

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

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

它的要点是：您可以为左侧菜单导航指定一个命名组件（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>

Angular ui-router子视图问题

3 个答案: