Nativescript : 라우터 출력 간을 이동하십시오.

더 나은 소개는 blog post about outlets을 참조하십시오.Nativescript : 라우터 출력 간을 이동하십시오.

TabView를 사용하여 nativescript (ProtectedComponent)로 작성된 모바일 앱을 탐색합니다.

<TabView 
    #tabView 
    tabsBackgroundColor="#f57c00" selectedTabTextColor="#B23010" 
    [(ngModel)]="selectedIndex" 
    (selectedIndexChanged)="tabViewIndexChange(tabView.selectedIndex)"> 

    <StackLayout *tabItem="{iconSource: 'res://tab-icons/cats'}"> 
    <cats-tab></cats-tab> 
    </StackLayout> 

    <StackLayout *tabItem="{iconSource: 'res://tab-icons/dogs'}"> 
    <dogs-tab></dogs-tab> 
    </StackLayout> 
</TabView>

이 탐색을위한 관련 구성 요소 코드의 일부입니다

<router-outlet name="catOutlet"></router-outlet>

라우팅이 설정은에 있습니다

이

navigateToCatsRoot() { 
    this.router.navigate([ 
    '/protected', 
    { outlets: { catOutlet: ['cats'] } } 
    ]); 
} 

navigateToDogsRoot() { 
    this.router.navigate([ 
    '/protected', 
    { outlets: { dogOutlet: ['dogs'] } } 
    ]); 
} 

tabViewIndexChange(index: number) { 
    switch(index) { 
    case 0: 
     this.navigateToCatsRoot(); 
     break; 
    case 1: 
     this.navigateToDogsRoot(); 
     break; 
    } 
}

모든 탭은 단지 예를 들어, 라우터 출구 구성이 포함되어 다음과 같은 방법 :

{ path: "", redirectTo: "/login", pathMatch: "full" }, 
{ path: "login", component: LoginComponent }, 
{ path: 'protected', component: ProtectedComponent, children: [ 
    { path: 'cats', component: CatsComponent, outlet: 'catOutlet'}, 
    { path: 'cat/:id', component: CatDetailComponent, outlet: 'catOutlet'}, 
    { path: 'dogs', component: DogsComponent, outlet: 'dogOutlet'}, 
    { path: 'dog/:id', component: DogDetailComponent, outlet: 'dogOutlet'}, 
    ]},

탭 탐색 기능은 매력처럼 작동합니다. 나는 다른 콘센트에 탭 탐색을 탐색 할 수 있으며, 또한 그 출구의 상세 페이지로 하나 개의 콘센트에서 탐색 할 수 있습니다 : 최대한 빨리하려고 해요로

this.router.navigate(
    ['/protected', { outlets: { catOutlet: ['cat', cat.id] } }] 
);

내가 실행 해요 문제는 한 콘센트의 하나의 상세보기에서 다른 콘센트의 다른 상세보기로 건너 뜁니다. 그래서 고양이 상세보기에서 다음을 호출하면 :

this.router.navigate(
    ['/protected', { outlets: { dogOutlet: ['dog', dog.id] } }] 
);

나는 어떤 종류의 오류도 발생하지 않지만 아무 것도 일어나지 않을 것입니다. 탭 네비게이션 (여전히 작동 함)을 사용하여 콘센트로 전환하자마자 개보기 (탭 탐색에서 수행해야하는 작업)로 재설정되기 전에 아주 짧은 시간 동안 자세하게 개보기를 볼 수 있습니다.

즉, dogOutlet은 실제로 올바른 탐색 및 구성 요소로 업데이트되지만보기/출력으로 전환되지 않습니다. 구성 요소가로드되면 Dog 상세보기의 OnInit에 로그인하여 확인했습니다. 그 콘센트로 전환하지 않고 그 콘센트를 보여줍니다.

해당 콘센트를 업데이트하지 않고 탭보기와 같이 개요 구성 요소에서 작동하는 것처럼 어떻게 전환 할 수 있습니까?

출처

2017-09-27 Christian Kolb

나는 github repository as an issue에 질문을 올렸고 대답을 얻었다.

문제는 내비게이션이 실제로 변경되었지만 TabView의 selectedIndex은 변경되지 않았다는 것입니다. 탐색 변경에 추가 작업을 수행하면 모든 것이 작동합니다!

let tabView:TabView = <TabView>this.page.getViewById("tabView"); 
tabView.selectedIndex = 2;

출처

2017-10-07 07:57:25

Nativescript : 라우터 출력 간을 이동하십시오.

답변

관련 문제