我正在玩新的角度路由器,并想尝试一个我有一个组件和一个嵌套组件的用例。
下面是我编写的用于定义两个组件和路由的 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但子组件仍然可见。