修复ionic中tab嵌套路由时路径匹配失效的问题

路由种类：

1. Nav，由 ion-nav 组件生成，继承自 NavControllerBase。
2. Tabs，由 ion-tabs 组件生成，与 nav 一样有 getActiveChildNavs 方法，用于获取子路由。
3. 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。