Question

我正在尝试通过循环路由器的所有路由来创建动态菜单。

简化类（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属性。我有什么想法可以让它发挥作用吗？

Answer 1

改变这个：

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

到此：

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

插值绑定仅适用于单值属性，而不适用于具有可绑定属性的自定义属性。

如果您不知道：router.routes属性是NavModel类型的列表，其属性config包含RouteConfig。

Answer 2

在导航栏中，您不需要使用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>

在route-href属性中使用插值

2 个答案: