2017-12-11 85 views
5

Ứng dụng rất đơn giản, nó kết hợp menu và tab bên. Tôi nghĩ rằng nó hoạt động hoàn hảo nhưng không phải cho đến khi tôi phát hiện ra rằng điều hướng đến một root page sau đó nhấn nút Trình duyệt trước đó gây ra một nhấp nháy lạ của thanh điều hướng. Điều hướng trở lại từ trang gốc tới trang được tab gây ra nhấp nháy lạ

Đây là output Tôi đang nhận được cho đến nay.

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

} 

Toàn bộ dự án có sẵn here nếu thông tin là chưa đủ.

Cập nhật Tôi không thể giải thích rõ ràng hơn nhưng nếu bạn cố gắng chạy dự án và quan sát các URL như bạn chuyển từ một tab để phi tabbed trang vấn đề này có vẻ là từ lịch sử hàng hải.

+0

bạn đã thử nghiệm trên thiết bị chưa? – ewizard

+0

là có lý do bạn sử dụng '@ViewChild (Nav) nav: Nav;' thay vì 'navCtrl'? – ewizard

+0

@ewizard Thử nghiệm nó trên Ionic DevApp và nhấp nháy xảy ra. Tương tự với Chrome. –

Trả lời

0

Trong file app.component.ts của bạn, thiết lập giá trị rootPage như

rootPage:

và trong tập tin menu.ts của bạn, thiết lập giá trị rootPage 'MenuPage' như

rootPage: 'HomePage' (hoặc bất kỳ Trang nào bạn muốn hiển thị trong Tab).

Cách tiếp cận này phù hợp với tôi

+1

Điều này không giải quyết được vấn đề. Dường như bạn chưa đánh giá kỹ câu hỏi hoặc nguồn trước khi trả lời. –

Các vấn đề liên quan