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) и затем нажимаю кнопку refresh, родительский и дочерний компоненты больше не отображаются. Маршрут не восстанавливается, хотя URL-адрес остается прежним. Нужно ли восстанавливать или что-то делать, чтобы восстановить состояние страницы? Это очень простая функция, позволяющая создавать закладки для URL.
  2. Если перейти к самому низкому уровню (#/parent/child) и щелкнуть ссылку " Перейти к родительскому элементу", URL-адрес будет правильно установлен на # / parent, но дочерний компонент все еще будет виден.
Источник

4 ответа

Это Старый Путь # 

 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.

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

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

Удачи!

Источник
Другие вопросы по тегам