如何使用保存状态的Aurelia实现可导航的选项卡？

Question

以下情景：

标签可以来去。我现在想到的想法是为每个标签设置一个<router-view>。确切地说name d <router-view>。当需要添加选项卡时，我想动态添加一个viewPorts属性设置为相应<router-view>名称的路由。 我根据当前打开的标签显示或隐藏<router-view> s。

这会有用吗？我错过了什么吗？ 您是否有其他/更好的方法来实现这个和/或可以提供示例链接？

Answer 1

您可以使用子路由器以更清洁的方式执行此操作。您可以在父组件的ts / js文件中配置子路由器：

configureRouter(config: RouterConfiguration, router: Router){
    config.map([
        { route: 'tab-1', name: 'tab-1', moduleId: 'tab-1/tab-1', nav: 'true', title: 'Tab 1' },
        { route: 'tab-2', name: 'tab-1', moduleId: 'tab-2/tab-2', nav: 'true', title: 'Tab 2' },
        { route: 'tab-3', name: 'tab-3', moduleId: 'tab-3/tab-3', nav: 'true', title: 'Tab 3' }
    )
}

将每个标签设为自定义元素，在上面的代码中我将它们命名为“tab- *”。

然后，您可以继续为选项卡式导航创建新组件（您始终可以将导航逻辑放在父组件中，但我发现此方法更清晰，模式模块化且可重复使用）

<强> tabnav.ts

import {bindable} from 'aurelia-framework';
import {Router} from 'aurelia-router';

export class TabnavCustomElement{
    @bindable router: Router;
}

<强> tabnav.html

<template>
<ul>
    <li repeat.for="navItm of router.navigation">
        <a href.bind="navItm.href" class="nav-link ${navItm.isActive ? 'active' : ''}">${navItm.title}</a>
    </li>
</ul>

您可以转到 parent.html 并将其包含在内：

<tabnav router.bind="router"></tabnav>
<router-view></router-view>

<router-view>将根据您点击的标签进行更改。如果要在选项卡之间共享状态，可以创建一个共享服务，您可以在这三个自定义元素中注入每个元素。

每次要添加新选项卡时，只需为该选项卡创建一个新的自定义元素并将其放在路由器中。然后，导航组件有责任在屏幕上显示