路由种类:
- Nav,由 ion-nav 组件生成,继承自 NavControllerBase。
- Tabs,由 ion-tabs 组件生成,与 nav 一样有 getActiveChildNavs 方法,用于获取子路由。
- Tab,有 ion-tab 组件生成,依赖于 Tabs 并且是其子路由,继承自 Nav。
当 Tab 下还有路由时(Tab子路由),就会导致页面刷新后,ionic无法根据路径正确匹配页面。因为ionic在通过路径生成 View 时,子路由尚未加载完成,无法继续生成 View,于是造成只匹配到 Tab 就结束了。
查看源码发现,在 Nav 和 Tabs 中都在 ngAfterViewInit 中调用了生成 segment 的操作。
// nav
const segment = this._linker.getSegmentByNavIdOrName(this.id, this.name);
// tabs
const tabsSegment = this._linker.getSegmentByNavIdOrName(this.id, this.name);
getSegmentByNavIdOrName 方法来自 DeepLinker。
getSegmentByNavIdOrName(navId: string, name: string): NavSegment {
const browserUrl = normalizeUrl(this._location.path());
const segments = this._serializer.parse(browserUrl);
for (const segment of segments) {
if (segment.navId === navId || segment.navId === name) {
return segment;
}
}
return null;
}
具体生成操作又指向 UrlSerializer,最后确认生成操作是在 hydrateSegmentsWithNav 方法中实现的。
export function hydrateSegmentsWithNav(app: App, dehydratedSegmentPairs: DehydratedSegmentPair[]) {
const segments: NavSegment[] = [];
for (let i = 0; i < dehydratedSegmentPairs.length; i++) {
let navs = getNavFromNavGroup(dehydratedSegmentPairs[i].navGroup, app);
for (const dehydratedSegment of dehydratedSegmentPairs[i].segments) {
// FIX,判断navs为Tab类型时,取其子路由的值。
if (navs.length > 0 && isPresent(navs[0]._tabId)) {
navs = navs[0].getActiveChildNavs();
}
if (navs.length === 1) {
segments.push(hydrateSegment(dehydratedSegment, navs[0]));
navs = navs[0].getActiveChildNavs();
} else if (navs.length > 1) {
segments.push(hydrateSegment(dehydratedSegment, navs[navs.length - 1]));
navs = navs[navs.length - 1].getActiveChildNavs();
} else {
break;
}
}
}
return segments;
}
要使子路由能够正确加载完成,需要延迟其初始化的时间。修改 Tabs 中 ngAfterViewInit 调用 initTabs 方法的的时机。
// NEW
_initPromise: Promise<any>;
ngAfterViewInit() {
this._setConfig('tabsPlacement', 'bottom');
this._setConfig('tabsLayout', 'icon-top');
this._setConfig('tabsHighlight', this.tabsHighlight);
if (this.tabsHighlight) {
this._plt.resize
.takeUntil(this._onDestroy)
.subscribe(() => this._highlight.select(this.getSelected()));
}
// FIX,查找父级元素是否存在Tabs,等待其初始化完成后再进行初始化。
var parent = this.parent;
while (parent) {
// 找到Tabs时退出循环
if (!!parent.getSelected) {
break;
}
parent = parent.parent;
}
// 将初始化返回的Promise保存在新增的_initPromise属性中
if (parent) {
parent._initPromise.then(() => {
this._initPromise = this.initTabs();
});
}
else {
this._initPromise = this.initTabs();
}
}
initTabs(): Promise<any> {
let selectedIndex = (isBlank(this.selectedIndex) ? 0 : parseInt(<any>this.selectedIndex, 10));
const tabsSegment = this._linker.getSegmentByNavIdOrName(this.id, this.name);
if(tabsSegment) {
selectedIndex = this._getSelectedTabIndex(tabsSegment.secondaryId, selectedIndex);
}
let selectedTab = this._tabs.find((t, i) => i === selectedIndex && t.enabled && t.show);
if(!selectedTab) {
selectedTab = this._tabs.find(t => t.enabled && t.show);
}
let promise = Promise.resolve();
if(selectedTab) {
selectedTab._segment = tabsSegment;
// FIX,增加updateUrl属性,防止延迟加载时,路径被更新。
// 判断tabsSegment存在时不更新路径,否则更新路径,直接访问域名时不会生成tabsSegment
promise = this.select(selectedTab, { updateUrl: (tabsSegment && tabsSegment.id) ? false : true });
}
return promise.then(() => {
this._tabs.forEach(t => {
t.updateHref(t.root, t.rootParams);
});
});
}
还要在 Nav 中也实现一遍。
ngAfterViewInit() {
this._hasInit = true;
// FIX,查找父级元素是否存在Tabs,等待其初始化完成后再进行初始化。
var parent = this.parent;
while (parent) {
// 找到Tabs时退出循环
if (!!parent.getSelected) {
break;
}
parent = parent.parent;
}
// 存在Tabs则等待其初始化完成后执行初始化
if (parent) {
parent._initPromise.then(function () {
this.initNav();
});
}
else {
this.initNav();
}
}
// NEW,将初始化操作提取为方法
InitNav() {
const segment = this._linker.getSegmentByNavIdOrName(this.id, this.name);
if (segment && (segment.component || segment.loadChildren)) {
return this._linker.initViews(segment).then(views => {
return this.setPages(views, null, null);
});
} else if (this._root) {
const setUrl = segment ? false : true;
return this.push(this._root, this.rootParams, {
isNavRoot: (<any>this._app.getRootNavById(this.id) === this),
updateUrl: setUrl
}, null);
}
}
修改后重新生成项目,嵌套路由就能正确的匹配了。
修改 node_modules 中的源码时,需要注意新增方法时要修改对应的 .metadata.json 文件,否则打包后可能会无法执行新增的方法。
此例子需要修改 nav.metadata.json,搜索 ngAfterViewInit,出现两处匹配,复制该键,修改键名为 InitNav 即可,可以参考 tabs.metadata.json。