如何實現可保存狀態的Aurelia導航標籤？

以下情形：如何實現可保存狀態的Aurelia導航標籤？

標籤可以來來去去。我目前的想法，我試圖找出是每個標籤有一個<router-view>。準確地說是name d <router-view>。當需要添加標籤時，我想動態地添加一個viewPorts屬性設置爲相應的<router-view>名稱的路由。根據當前打開的選項卡，我顯示或隱藏<router-view> s。

這項工作？我錯過了什麼嗎？您是否有其他/更好的方法來實現這個和/或可以提供示例鏈接？

來源

2017-04-06 timmkrause

我認爲如果在每個選項卡中只有一個'router-view'和自定義元素會更容易。如果他們有太多的信息，你可以在更改標籤 –

時加載數據嗯，這個工作嗎？我的意思是自定義的元素/組件是按鈕應該指示的可導航的，在這種情況下，視圖路由到另一個視圖，並且「標籤」的全部內容需要被替換。 – timmkrause

您可以通過使用子路由器以更簡潔的方式來完成此操作。您可以配置路由器的孩子像這樣在你的父組件的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' } 
    ) 
}

讓每一個選項卡自定義元素，在上面的代碼中，我將它們命名爲「製表符*」。

然後，您可以繼續前進，爲您的標籤導航創建一個新的組件（你總是可以把導航邏輯父組件，但我覺得這種做法是更清潔，模式模塊化和可重用）

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>然後將改變根據什麼，你點擊選項卡。如果您想在選項卡之間共享狀態，您可以創建一個共享服務，您可以在這三個自定義元素中的每一個上注入該共享服務。

此外，每次您想添加一個新選項卡時，只需爲該選項卡創建一個新的自定義元素並將其放置在路由器中。這是導航組件的責任，然後在屏幕上顯示它

來源

2017-04-06 13:27:39 dimlucas

謝謝你的回答！事情是這個解決方案只有一個''這意味着所有標籤只有一個渲染容器，對吧？我必須解決的一件事是，如果我在標籤之間切換，標籤的狀態不應該消失。因爲我的想法是有多個名爲'<路由器視圖>'這是特別針對通過'viewPorts'選項卡路由（路由定義中可配置）。 – timmkrause

會試試看。 – timmkrause

@timmkrause是的，你只會有一個路由器視圖所有選項卡，但正如我在答覆中提到，你可以保存在由通信標籤共享的注射服務，狀態。 – dimlucas

如何實現可保存狀態的Aurelia導航標籤？

回答

相關問題