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

以下场景：

标签可以来也可以去。我目前想弄清楚的是，每个选项卡都有一个

。确切地说，A

名称

d

。当需要添加选项卡时，我希望动态添加一条路线，并将

视口

属性设置为相应的

名称。 根据当前打开的选项卡，我显示或隐藏

s

这样行吗？我错过什么了吗？

---

您是否有其他/更好的方法来实现此功能和/或提供示例链接？

您可以通过使用子路由器以更干净的方式实现此功能。您可以在父组件的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>

然后，

将根据您单击的选项卡内容进行更改。如果要在选项卡之间共享状态，可以创建一个共享服务，可以在三个自定义元素中的每一个上注入该服务

---

此外，每次你想添加一个新标签，你只需为该标签创建一个新的自定义元素，并将其放置在路由器中。导航组件有责任在屏幕上显示它

您可以通过使用子路由器以更干净的方式来实现这一点。您可以在父组件的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>

然后，

将根据您单击的选项卡内容进行更改。如果要在选项卡之间共享状态，可以创建一个共享服务，可以在三个自定义元素中的每一个上注入该服务

---

此外，每次你想添加一个新标签，你只需为该标签创建一个新的自定义元素，并将其放置在路由器中。导航组件有责任在屏幕上显示它

我认为如果每个选项卡中只有一个

路由器视图

和自定义元素，会更容易。如果他们有太多的信息，您可以在更改tabsHm时加载数据，这会起作用吗？我的意思是自定义元素/组件是可导航的，按钮应该指明，在这种情况下，视图将路由到另一个视图，并且需要替换“选项卡”的全部内容。我认为如果每个选项卡中只有一个

路由器视图和自定义元素，会更容易。如果他们有太多的信息，您可以在更改tabsHm时加载数据，这会起作用吗？我的意思是自定义元素/组件是可导航的，按钮应该指明，在这种情况下，视图路由到另一个视图，需要替换“选项卡”的全部内容。谢谢您的回答！问题是这个解决方案只有一个
，这意味着所有选项卡只有一个呈现容器，对吗？我必须解决的一件事是，如果我在标签之间切换，标签的状态不应该消失。正因为如此，我的想法是有多个命名的
，这是通过
视口（可在路由定义中配置）的选项卡路由专门针对的。我将尝试一下。@timmkrause Yes，对于所有选项卡，您只有一个路由器视图，但正如我在回答中提到的，您可以将该状态保存在通信选项卡共享的可注入服务中。谢谢您的回答！问题是这个解决方案只有一个
，这意味着所有选项卡只有一个呈现容器，对吗？我必须解决的一件事是，如果我在标签之间切换，标签的状态不应该消失。正因为如此，我的想法是有多个命名的
，这是通过
视口（可在路由定义中配置）的选项卡路由专门针对的。我将尝试一下。@timmkrause Yes，对于所有选项卡，您只有一个路由器视图，但正如我在回答中提到的，您可以将该状态保存在通信选项卡共享的可注入服务中。