Angular новый маршрутизатор - вложенные компоненты и маршрутизация

Я играю с новым маршрутизатором 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), а затем нажмите ссылку "Перейти к родительскому", URL-адрес будет правильно установлен на #/parent, но дочерний компонент все еще будет виден.

ОТВЕТЫ

Ответ 1

Первое, что меня поразило, это то, что вы не используете какой-либо идентификатор, который указывает на родителя и ребенка, который вы хотите отобразить.

Как/где вы получаете эту информацию? Ваш URL выглядел бы намного лучше (и, возможно, даже решил бы проблему, если бы он был написан как

/parent/:parentId/

или

/parent/:parentId/child/:childId

Я в основном сам использовал routeProvider и routeParameters, и они предоставляют эту функциональность без каких-либо хлопот, но поскольку это упражнение выглядит чисто академическим, я постараюсь прочитать, что на самом деле делает модуль, а также проверить, есть ли это проблема, связанная с GitHub.

Кроме того, эта страница из документации, кажется, проливает свет на проблему.

Если это вам совсем не поможет, рассмотрите возможность помочь нам, предоставив нам дополнительную информацию?

Удачи!

Ответ 2

Это старый путь #

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

Ответ 3

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

Ответ 4

Вы также можете попробовать использовать UI Router.

Вы также можете посмотреть этот, если хотите использовать вложенные маршруты.