標籤可以來來去去。我目前的想法,我試圖找出是每個標籤有一個<router-view>
。準確地說是name
d <router-view>
。當需要添加標籤時,我想動態地添加一個viewPorts
屬性設置爲相應的<router-view>
名稱的路由。 根據當前打開的選項卡,我顯示或隱藏<router-view>
s。
這項工作?我錯過了什麼嗎? 您是否有其他/更好的方法來實現這個和/或可以提供示例鏈接?
標籤可以來來去去。我目前的想法,我試圖找出是每個標籤有一個<router-view>
。準確地說是name
d <router-view>
。當需要添加標籤時,我想動態地添加一個viewPorts
屬性設置爲相應的<router-view>
名稱的路由。 根據當前打開的選項卡,我顯示或隱藏<router-view>
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' }
)
}
讓每一個選項卡自定義元素,在上面的代碼中,我將它們命名爲「製表符*」。
然後,您可以繼續前進,爲您的標籤導航創建一個新的組件(你總是可以把導航邏輯父組件,但我覺得這種做法是更清潔,模式模塊化和可重用)
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>
然後將改變根據什麼,你點擊選項卡。如果您想在選項卡之間共享狀態,您可以創建一個共享服務,您可以在這三個自定義元素中的每一個上注入該共享服務。
此外,每次您想添加一個新選項卡時,只需爲該選項卡創建一個新的自定義元素並將其放置在路由器中。這是導航組件的責任,然後在屏幕上顯示它
謝謝你的回答!事情是這個解決方案只有一個'
會試試看。 – timmkrause
@timmkrause是的,你只會有一個路由器視圖所有選項卡,但正如我在答覆中提到,你可以保存在由通信標籤共享的注射服務,狀態。 – dimlucas
我認爲如果在每個選項卡中只有一個'router-view'和自定義元素會更容易。如果他們有太多的信息,你可以在更改標籤 –
時加載數據嗯,這個工作嗎?我的意思是自定義的元素/組件是按鈕應該指示的可導航的,在這種情況下,視圖路由到另一個視圖,並且「標籤」的全部內容需要被替換。 – timmkrause