Aurelia Как использовать дочерний маршрутизатор и динамические дочерние маршруты

Пытаюсь использовать дочерний маршрут в Aurelia. Кажется, я не могу понять работу вложенных маршрутов. Все ли маршруты получены из корня приложения или относительно местоположения текущего маршрутизатора?

Почему мой route-href не работает в этом примере? У меня есть маршрут в этом маршрутизаторе с именем screen и у него есть параметр :id

screens/list.ts

@inject(Router)
export class ScreensList {
  heading;
  router;
  screens: any[];

  constructor(router){
    this.heading = 'Child Router';
    this.router = router;
    this.screens = [
      {
        id: 1,
        name: 'my screen'
      },
      {
        id: 2,
        name: 'my other screen'
      }
    ]

    router.configure(config => {
      config.map([
        // dynamic routes need a href, such as href: screen
        { route: 'screen/:id',  moduleId: 'screens/screen/display',  name: 'screen', title: 'Screen #1' }
      ]);
    });
  }
}

Посмотреть список

screens/list.html

<li repeat.for="screen of screens">
  <a route-href="route: 'screen', params: { id: screen.id }"/>Screen #${screen.id}</a>
</li>

Затем у меня есть фиктивный VM/V в screens/screen/display. Мне действительно нужно указать полный путь к файлу для модуля во вложенном дочернем маршрутизаторе. Я думал, что это будут маршруты относительно местоположения родительского маршрутизатора или хотя бы имени (корня) родителя?

vendor-bundle.js:11582 ERROR [route-href] Error: A route with name ''screen', params: { id: screen.id }' could not be found. 
Check that `name: ''screen', params: { id: screen.id }'` was specified in the route's config.

parent-child nested-routes aurelia
person Kristian Mandrup    schedule 03.08.2016    source источник
comment
Дох! Я скопировал тег привязки из другого ответа с опечатками! Это правильный синтаксис. <a route-href="route: screen; params: { id: screen.id }"> Убедитесь, что имя маршрута, здесь screen, соответствует маршруту с таким именем, который, как часть шаблона маршрута в route, принимает параметр :id Все еще возникают проблемы даже с этой простой вещью!   -  person Kristian Mandrup    schedule 03.08.2016

Ответы (1)


arrow_upward
1
arrow_downward

В вашем примере вы вводите маршрутизатор, настроенный в app.js, а затем вызываете его метод configure. Аурелия — это условность над конфигурацией. Итак, используйте соглашение, и все будет в порядке. Метод configureRouter поможет вам. Например:

export class ScreensList {

  configureRouter(config, router) {
    config.map([
      { route: 'screen/:id',  moduleId: 'screens/screen/display',  name: 'screen', title: 'Screen #1' }
    ]);

    this.router = router;
  }

}

Помните, что ScreensList должен быть экраном вашего роутера. Это не будет работать, если это пользовательский элемент.

Взгляните на примеры скелетной навигации https://github.com/aurelia/skeleton-navigation. Есть хорошие примеры, в том числе дочерняя маршрутизация.

person Fabio Luz    schedule 03.08.2016