Angular新路由器 - 嵌套组件和路由

时间:2015-05-20 12:13:58

标签: angularjs angular-routing angular-new-router

我正在使用新的角度路由器,并想尝试一个用例,其中有一个组件和一个嵌套组件

下面是我编写的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

根据此代码,我有以下问题:

  1. 如果我转到最低级别(#/ parent / child)然后点击刷新,则不再显示父组件和子组件。即使URL仍然相同,路由也不会恢复。我是否需要重新启动或执行某些操作来恢复页面的状态?这是一个非常基本的功能,可以为网址添加书签。
  2. 如果我转到最低级别(#/ parent / child),然后点击转到父级链接,则网址已正确设置为#/ parent 但子组件仍然可见。

4 个答案:

答案 0 :(得分:0)

首先让我感到震惊的是,你没有使用任何指向你想要展示的父母和孩子的标识符。

您如何/在何处获得此信息?你的网址看起来会更好(甚至可能解决问题,如果它被写成

/parent/:parentId/

/parent/:parentId/child/:childId.

我自己主要使用routeProvider和routeParameters,他们提供这个功能没有任何麻烦但是因为这似乎是纯粹学术性的,我会尝试阅读模块实际上在做什么以及检查github问题中是否存在相关问题。

此外,this page from the documentation似乎对此问题有所了解。

如果这对您没有任何帮助,您会考虑通过向我们提供更多信息来帮助我们吗?

祝你好运!

答案 1 :(得分:0)

这是Old Way#

&#13;
&#13;
{{1}}
&#13;
&#13;
&#13;

答案 2 :(得分:0)

**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 .**

答案 3 :(得分:0)

您也可以尝试使用UI Router

如果您想使用嵌套路线,也可以查看this