【问题标题】：Angular new router - Nested components and routingAngular 新路由器 - 嵌套组件和路由
【发布时间】：2015-08-01 16:21:53
【问题描述】：

我正在使用新的 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但子组件仍然可见。

【问题讨论】：

这个问题可能与此有关：github.com/angular/router/issues/222
github.com/angular/router/issues/117 也正在进行更多讨论
我也在 GitHub 上开了一个 issue：github.com/angular/router/issues/334
为什么不使用 ui.router 进行多状态？
我建议你使用 ui.router 而不是这个 $router。它有更多的文档，而不是那么原始的代码ui.router

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

【解决方案1】：

这是老路#

 var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "parent.htm"
    })
    .when("/other", {
        templateUrl : "Default.htm"
    });
});

【讨论】：

使用新方法我们可以执行路由 this . (function () { 'use strict'; angular .module('app', ['parent', 'home ', 'ngNewRouter']) .controller('AppController', function ($router) { this.header = 'TITLE'; $router.config([ { path: '/', component: 'home' }, { path : '/parent', 组件: 'parent' } ]); }); })(); 我希望这会奏效。

【解决方案2】：

**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】：

您也可以尝试使用UI Router。

如果您想使用嵌套路由，也可以查看this。

【讨论】：

不完整的答案

【解决方案4】：

让我印象深刻的第一件事是，您没有使用任何标识符来指向您要显示的父项和子项。

您如何/从哪里获得这些信息？你的 url 看起来会好很多（如果写成

甚至可以解决问题

/parent/:parentId/

或

/parent/:parentId/child/:childId

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

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

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

祝你好运！

【讨论】：