1

嗨，这是我在 stackoverflow 中的第一个问题，非常感谢任何帮助：

基本上我的代码显示了两个页面，可以在同一页面或其他页面上进行导航。我找不到使用路由器将我的代码升级到 Ionic4 的方法。

我在 Ionic3 中的service.ts是：

_oneNav: Nav = null;

get oneNav(): Nav {
    return this._oneNav;
}
set oneNav(value: Nav) {
    this._oneNav = value;
}

_twoNav: Nav = null;
get twoNav(): Nav {
    return this._twoNav;
}
set twoNav(value: Nav) {
    this._twoNav = value;
}

_isOn: boolean = false;

get isOn(): boolean {
    return this._isOn;
}
set isOn(value: boolean) {
    this._isOn = value;
}



pushTwo(page: any, params: any) {
    console.log("pushTwo",this.isOn);
    (this.isOn) ?
        this.twoNav.setRoot(page, params):
        //this.twoNav.push(page, params);
        this.oneNav.push(page, params);
}


pushOne(page: any, params: any) {
    this.oneNav.push(page, params);
}

setRootOne(page: any, params: any) {
    this.oneNav.setRoot(page, params);
}

onSplitPaneChanged(isOn) {
    // set local 'isOn' flag...
    this.isOn = isOn;
    // if the nav controllers have been instantiated...
    if (this.oneNav && this.twoNav) {
        (isOn) ? this.activateSplitView() :
                 this.deactivateSplitView();
    }
}
activateSplitView() {
    let currentView = this.oneNav.getActive();
        if (currentView.component.prototype
            instanceof _TwoPage) {
            // if the current view is a 'Two' page...
            // - remove it from the 'one' nav stack...
            this.oneNav.pop();
            // - and add it to the 'two' nav stack...
            this.twoNav.setRoot(
                currentView.component,
                currentView.data);
        }
 }
deactivateSplitView() {
    let twoView = this.twoNav.getActive();
    if(!twoView){
        return;
    }

    if (twoView.component.prototype instanceof _TwoPage) {
        // if the current two view is a 'Two' page...
        let index = this.oneNav.getViews().length;
        // add it to the one view...
        this.oneNav.insert(
            index,
            twoView.component,
            twoView.data
    );
    }
}

app.html是：

<ion-content>
  <ion-split-pane (ionChange)="service.onSplitPaneChanged($event._visible);">
      <ion-nav [root]="onePage" #oneNav></ion-nav>
      <ion-nav [root]="twoPage" #twoNav main></ion-nav>
  </ion-split-pane>
</ion-content>

我试图从 @ionic/angular 导入 RouterOutlet 但没有成功

4

1 回答 1

0

您需要阅读 Ionic 4 迁移指南，他们还定义了路由迁移。据我所知，默认离子路由（推送/弹出）已更改为角度路由，现在您可以使用 href='link' 路由到其他页面。

于 2018-08-02T11:20:20.880 回答