Блог

Я пытаюсь создать динамическое меню, перебирая все маршруты маршрутизатора.

Упрощенный класс (тип TypeScript):

 @inject(Router)
export class NavBar {
    constructor(private router: Router) {}
}
  

Упрощенный вид:

 <div repeat.for="route in router.routes">
    <a route-href="route: ${route.name}">${route.title}</a>
</div>
  

Хотя это работает, если я просто распечатываю свойства маршрутов в цикле, этот подход, похоже, не работает для route-href атрибута. Есть идеи, как я могу заставить это работать?

Измените это:

route-href="route: ${route.name}"

для этого:

route-href="route.bind: route.config.name"

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

И на всякий случай, если вы не знали: router.routes свойство представляет собой список типа NavModel, который имеет свойство config , которое содержит RouteConfig .

В навигационной панели вам не нужно использовать route-href, вы могли бы сделать:

 <ul class="nav navbar-nav">
    <li repeat.for="route of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="route.href">${route.title}</a>
    </li>
</ul>
  

Однако route-href можно использовать, если вы хотите, чтобы пользователь нажимал на определенную ссылку, для которой требуется параметр.

 <tr repeat.for="log of logs">
    <td><a route-href="route: log-details; params.bind: { logId: log.id }">${log.id}</a></td>
</tr>