2017-12-11 1 views
5

앱이 간단하며 사이드 메뉴와 탭이 결합되어 있습니다. 나는 그것이 완벽하게 작동한다고 생각했지만 root page으로 탐색 한 다음 브라우저 이전 버튼을 누르면 탐색 표시 줄이 이상하게 깜박입니다.루트 페이지에서 탭이있는 페이지로 돌아 오는 과정에서 이상한 깜박임이 발생합니다.

이 은 지금까지 점점 오전 output입니다.

Menu.ts

import { Component,ViewChild } from '@angular/core'; 
import { IonicPage, NavController, NavParams, Nav } from 'ionic-angular'; 

export interface PageInterface { 
    title: string; 
    pageName: string; 
    tabComponent?: any; 
    index?: number; 
    icon: string; 
} 

// Am I doing some mistakes in the following block? 
@IonicPage({ 
}) 
@Component({ 
    selector: 'page-menu', 
    templateUrl: 'menu.html' 
}) 

export class MenuPage { 

    rootPage ="TabsPage"; 

    @ViewChild(Nav) nav: Nav; 

    pages: PageInterface[]= [ 
     { title:'Tab 1', pageName: 'TabsPage', tabComponent: 'HomePage', index: 0, icon:'home' }, 
     { title:'Tab 2', pageName: 'TabsPage', tabComponent: 'SchedulePage', index: 1, icon:'timer' }, 
     { title:'Tab 3', pageName: 'TabsPage', tabComponent: 'CasesPage', index: 2, icon:'briefcase' }, 
    { title:'Non-Tab', pageName: 'SplashPage', icon:'information-circle' } 
     ] 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 

    openPage(page: PageInterface) { 
    let params = {}; 

    if (page.index) { 
     params = { tabIndex: page.index}; 
    } 

    if (this.nav.getActiveChildNavs().length && page.index != undefined) { 
     this.nav.getActiveChildNavs()[0].select(page.index); 
     console.log('Else executed umdefined'); 
    } else { 
     // This is where I set new root page if it is not a tabbed page. 
    this.nav.setRoot(page.pageName, params).catch((err: any) => { 
     console.log(`Didn't set nav root: ${err}`); 
     }); 
    } 
    } 

    isActive(page: PageInterface) { 
    let childNav = this.nav.getActiveChildNavs()[0]; 

    if (childNav) { 
     if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) { 
     return 'primary'; 
     } 
     return; 
    } 

    if (this.nav.getActive() && this.nav.getActive().name === page.pageName) { 
     return 'primary'; 
    } 
    return; 
    } 

    ionViewDidLoad() { 
    console.log('MenuPage'); 
    } 
} 

Tabs.ts

@IonicPage({ 
    segment: 'page-tabs' 
}) 
@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    tab1Root= 'HomePage'; 
    tab2Root= 'SchedulePage'; 
    tab3Root= 'CasesPage'; 
    myIndex: number; 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    } 

} 

에서 정보가 충분하지 않은 경우, 전체 프로젝트가 here 사용할 수 있습니다.

업데이트 나는 명확하게 설명 할 수는 없지만 당신은 당신이 문제가 탐색의 역사에서 보인다 아닌 탭에 탭 페이지에서 스위치로 프로젝트를 실행하고 URL을 관찰하려고합니다. 당신의 app.component.ts 파일에서

+0

기기에서 테스트 해 보셨습니까? – ewizard

+0

거기에'navCtrl' 대신'@ViewChild (Nav) nav : Nav;'를 사용하는 이유가 있습니까? – ewizard

+0

@ewizard Ionic DevApp에서 테스트하여 깜박임이 발생합니다. Chrome과 동일합니다. –

답변

0

rootPage로 rootPage 값을 설정 : 'MenuPage'

하고 menu.ts 파일에

, 설정 rootPage 값을

rootPage로 : 'HomePage'(또는 탭에 표시 할 페이지).

이 접근법은 나를 위해 잘 작동

+1

이렇게해도 문제가 해결되지 않습니다. 대답하기 전에 질문이나 출처를 철저하게 평가하지 않은 것 같습니다. –

관련 문제