我正在使用新的angular路由器，并想尝试一个用例，其中我有一个组件和一个嵌套的组件。
下面是我用来定义两个组件和路由的JavaScript代码:
angular.module('app', ['ngNewRouter'])
.controller('AppController', function ($router) {
$router.config([
{
path: '/parent',
component: 'parent'
}
]);
})
.controller('ParentController', function ($router) {
this.name = 'Parent component';
$router.config([
{
path: '/child',
component: 'child'
}
]);
})
.controller('ChildController', function () {
this.name = 'Child component';
})
.config(function ($componentLoaderProvider) {
$componentLoaderProvider.setTemplateMapping(function (compName) {
return compName + '.html';
});
});
和HTML部分:
<!-- index.html -->
<body ng-controller="AppController as app">
<a ng-link="parent">Go to parent</a>
<div ng-viewport></div>
</body>
<!-- parent.html -->
{{ parent.name }}<br/>
<a ng-link="child">Show child</a>
<div ng-viewport></div>
<!-- child.html -->
{{ child.name }}
下面是一个包含上述代码的Plunker: http://plnkr.co/edit/yWCFgXQI491EYvIldjyR
基于这段代码，我有以下问题/问题:
- 如果我去到最低的级别(#/parent/child)，然后点击刷新，父组件和子组件不再显示。即使URL仍然是相同的，路由也不会恢复。我是否需要重新导航或做一些事情来恢复页面的状态?这是一个非常基本的功能，可以为url添加书签。
- 如果我进入最底层(#/parent/child)，然后点击 go to parent链接，URL被正确地设置为#/parent，但是子组件仍然可见。
这是老方法#
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "parent.htm"
})
.when("/other", {
templateUrl : "Default.htm"
});
});**Using new way we can do perform routing this .**
(function () {
'use strict';
angular
.module('app', ['parent', 'home', 'ngNewRouter'])
.controller('AppController', function ($router) {
this.header = 'TITLE';
$router.config([
{
path: '/', component: 'home'
},
{
path: '/parent', component: 'parent'
}
]);
});
})();
**I hope this will work .**你也可以尝试使用UI Router。
如果你想使用嵌套路由，你也可以看看这个
让我吃惊的第一件事是，您没有使用任何指向您想要显示的父级和子级的标识符。
你怎么/从哪里得到这个信息的?您的url将看起来更好(甚至可能解决问题，如果它被写成
)。/parent/:parentId/
或
/parent/:parentId/child/:childId
我主要使用routeProvider和routeParameters自己，他们提供这个功能没有任何麻烦，但由于这个练习似乎是纯粹的学术，我试着通过阅读模块实际上在做什么，以及检查是否有一个相关的问题之间的github问题。
此外，文档中的这一页似乎对这个问题有所说明。
如果这对你一点帮助都没有，你能考虑给我们更多的信息来帮助我们吗?祝你好运!