2017-04-06 9 views
0

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

enter image description here

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

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

+0

각 탭에 하나의 'router-view'및 사용자 정의 요소 만 있으면 더 쉬울 것이라고 생각합니다. 그들이 너무 많은 정보를 가지고 있다면 탭을 변경할 때 데이터를로드 할 수 있습니다 –

+0

흠,이게 효과가 있니? 즉, 사용자 정의 요소/구성 요소가 탐색 할 수있는 단추가 표시되어야합니다.이 경우에는 다른보기로의보기 경로가 변경되고 "탭"의 전체 내용이 바뀌어야합니다. – timmkrause

답변

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

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

+0

답변 해 주셔서 감사합니다! 이 솔루션은 하나의 ''만 가지고 있는데, 이는 모든 탭에 대해 하나의 렌더링 컨테이너 만 있다는 것을 의미합니다. 맞습니까? 그리고 내가 해결해야 할 한 가지는 탭 사이를 전환해도 탭의 상태가 사라지지 않아야한다는 것입니다. 그 때문에 내 생각은'viewPorts'를 통해 탭 경로에 의해 특별히 표적화 된 여러 개의''(경로 정의에서 구성 가능)라는 이름으로 생각했습니다. – timmkrause

+1

시도해보십시오. – timmkrause

+0

@timmkrause 네, 모든 탭에 대해 하나의 라우터보기 만있을 것입니다. 그러나 저의 답에서 언급했듯이 통신 탭에 의해 공유되는 주 사용 가능 서비스에 그 상태를 저장할 수 있습니다. – dimlucas