상태를 보존하는 Aurelia로 탐색 가능한 탭을 구현하는 방법은 무엇입니까? 시나리오에 따라

Question

:

탭 와서 갈 수 있습니다. 알아 내려고하는 현재의 아이디어는 각 탭마다 <router-view>입니다. name d <router-view> 정확히 일치해야합니다. 탭을 추가해야 할 때 해당 <router-view> 이름으로 설정된 viewPorts 속성이있는 경로를 동적으로 추가하려고합니다. 현재 열려있는 탭에 따라 <router-view>을 표시하거나 숨 깁니다.

이 방법이 유용할까요? 내가 놓친 게 있니? 이 방법을 구현하는 다른/더 좋은 방법이 있습니까? 예에 대한 링크를 제공 할 수 있습니까?

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' } 
    ) 
} 

모든 탭 사용자 정의 요소 확인, 위의 코드에서 내가 그들을라는 이름의 '탭 - *'.

그런 다음 가서 당신의 탭 탐색을위한 새 구성 요소를 만들 수 있습니다

(당신은 항상 부모 구성 요소에서 탐색 논리를 넣을 수 있습니다하지만 난 청소기로이 방법을 찾을 모드 모듈 형 및 재사용)

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> 다음 변경됩니다에 따라 당신이 클릭 탭. 탭 사이에서 상태를 공유하려면 세 개의 사용자 정의 요소 각각에 삽입 할 수있는 공유 서비스를 생성 할 수 있습니다.

또한 새 탭을 추가 할 때마다 해당 탭에 대한 새 사용자 정의 요소를 만들어 라우터에 배치하기 만하면됩니다. 화면에 표시하는 것은 내비게이션 구성 요소의 책임입니다.