Ứ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.
bạn đã thử nghiệm trên thiết bị chưa? – ewizard
là có lý do bạn sử dụng '@ViewChild (Nav) nav: Nav;' thay vì 'navCtrl'? – ewizard
@ewizard Thử nghiệm nó trên Ionic DevApp và nhấp nháy xảy ra. Tương tự với Chrome. –