Javascript 爱奥尼亚角v5路由-返回按钮

我正在设置一个ionic应用程序，在登录页面之后有多个页面。登录后，用户将看到一个带有侧菜单（抽屉）的主页，其中包含指向多个页面的链接（例如项目）。“项目”页面具有项目详细信息的链接

第一次

  Intro -> Login -> Home -> Item -> Item details

登录后

 Home -> Item -> Item Details

我的app.component.ts

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private storage: Storage,
    public navCtrl: NavController,
    public mutils: FSUtils,
    public mglobals: GlobalService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    var mloggedin:boolean=false;
    if(mloggedin){
      this.navCtrl.navigateRoot('/login');
    }else{
      this.navCtrl.navigateRoot('/home');
    }
    this.storage.get('session_obj').then((res) => {
      var msession_obj=res;
      if (msession_obj == null) {
        this.mglobals.muser_logged_in=false;
        this.navCtrl.navigateRoot('/login');
      } else {
        this.mglobals.muser_logged_in=true;
        this.navCtrl.navigateRoot('/home');
        }
    });
  }
}

  doLogin(mformObj) {
    var muser_email=mformObj.tuser_email;
    var mpassword=mformObj.tpassword;
    this.mutils.presentLoader({
      message: 'Please Wait. . .',
    });
    return new Promise(resolve => {
      let body = {
        action: 'doLogin',
        user_email: muser_email,
        password: mpassword
      }
      this.mutils.postData(body, 'login').subscribe((res: any) => {
        console.log(res.sessionId);
        this.mutils.dismissLoader();
        if (res.status == 1) {
          var msession_obj=res.session_obj;
          this.storage.set("session_obj",msession_obj);
          this.mutils.setSessionData(msession_obj);
          this.navCtrl.navigateRoot('/home');

        }else{
          this.mutils.presentToast(res.msg)
          this.storage.set("session_obj",null);
        }
      });
    });


  }
  openForgotPassword() {
    this.router.navigate(['/forgot-password']);
  }

My app.component.html

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

从我的Login.component.ts

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private storage: Storage,
    public navCtrl: NavController,
    public mutils: FSUtils,
    public mglobals: GlobalService
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    var mloggedin:boolean=false;
    if(mloggedin){
      this.navCtrl.navigateRoot('/login');
    }else{
      this.navCtrl.navigateRoot('/home');
    }
    this.storage.get('session_obj').then((res) => {
      var msession_obj=res;
      if (msession_obj == null) {
        this.mglobals.muser_logged_in=false;
        this.navCtrl.navigateRoot('/login');
      } else {
        this.mglobals.muser_logged_in=true;
        this.navCtrl.navigateRoot('/home');
        }
    });
  }
}

  doLogin(mformObj) {
    var muser_email=mformObj.tuser_email;
    var mpassword=mformObj.tpassword;
    this.mutils.presentLoader({
      message: 'Please Wait. . .',
    });
    return new Promise(resolve => {
      let body = {
        action: 'doLogin',
        user_email: muser_email,
        password: mpassword
      }
      this.mutils.postData(body, 'login').subscribe((res: any) => {
        console.log(res.sessionId);
        this.mutils.dismissLoader();
        if (res.status == 1) {
          var msession_obj=res.session_obj;
          this.storage.set("session_obj",msession_obj);
          this.mutils.setSessionData(msession_obj);
          this.navCtrl.navigateRoot('/home');

        }else{
          this.mutils.presentToast(res.msg)
          this.storage.set("session_obj",null);
        }
      });
    });


  }
  openForgotPassword() {
    this.router.navigate(['/forgot-password']);
  }

My home.page.html

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" >
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Brand Name</ion-title>
    
        </ion-toolbar>
      </ion-header>
    
      <ion-content>
        <div class="avatar_Container" >
          <ion-avatar class="image-center">
            <img src="https://image.freepik.com/free-vector/m-gold-logo-design_67734-93.jpg" >
          </ion-avatar>
          <h4 class="avatar_comp_name">{{this.mglobals.mcomp_name}}</h4>
          <p class="avatar_text">Welcome {{this.mglobals.muser_fname}}</p>
        </div>
      <ion-list>
          <ion-menu-toggle [autoHide]="false">
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='home'></ion-icon>
              <ion-label>
                Home
              </ion-label>
            </ion-item>
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button lines="none" class="menu_item" (click)="openLink('/products')">
              <ion-icon slot="start" name='pricetags-outline'></ion-icon>
              <ion-label>
                Items
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item" [routerLink]="['/customers']">
              <ion-icon slot="start" name='people-outline'></ion-icon>
              <ion-label>
                Customers
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-down-outline'></ion-icon>
              <ion-label>
                Vendors
              </ion-label>
            </ion-item>
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-down-outline'></ion-icon>
              <ion-label>
                Purchase
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-up-outline'></ion-icon>
              <ion-label>
                Sales
              </ion-label>
            </ion-item>
    
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button (click)="doLogout()" lines="none" class="menu_item">
              <ion-icon slot="start" name='exit'></ion-icon>
              <ion-label>
                Logout
              </ion-label>
            </ion-item>
    
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
        </ion-menu>
    <div class="ion-page" id="main-content">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-buttons slot="start">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon slot="icon-only" name="menu"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
          <ion-title>Brand Name</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">

        <ion-button (click)="openLink('/products')" expand="block" fill="clear" shape="round">
          Click me
        </ion-button>

      </ion-content>
    </div>

  </ion-split-pane>
</ion-app>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-back-button ></ion-back-button>
      </ion-buttons>
      <ion-title>Products</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

    <ion-button (click)="openDetails()" expand="block" fill="clear" color="primary">
      Details
    </ion-button>

  </ion-content>
</div>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-back-button ></ion-back-button>
      </ion-buttons>
      <ion-title>Product Details</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

My Product.page.html

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" >
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Brand Name</ion-title>
    
        </ion-toolbar>
      </ion-header>
    
      <ion-content>
        <div class="avatar_Container" >
          <ion-avatar class="image-center">
            <img src="https://image.freepik.com/free-vector/m-gold-logo-design_67734-93.jpg" >
          </ion-avatar>
          <h4 class="avatar_comp_name">{{this.mglobals.mcomp_name}}</h4>
          <p class="avatar_text">Welcome {{this.mglobals.muser_fname}}</p>
        </div>
      <ion-list>
          <ion-menu-toggle [autoHide]="false">
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='home'></ion-icon>
              <ion-label>
                Home
              </ion-label>
            </ion-item>
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button lines="none" class="menu_item" (click)="openLink('/products')">
              <ion-icon slot="start" name='pricetags-outline'></ion-icon>
              <ion-label>
                Items
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item" [routerLink]="['/customers']">
              <ion-icon slot="start" name='people-outline'></ion-icon>
              <ion-label>
                Customers
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-down-outline'></ion-icon>
              <ion-label>
                Vendors
              </ion-label>
            </ion-item>
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-down-outline'></ion-icon>
              <ion-label>
                Purchase
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-up-outline'></ion-icon>
              <ion-label>
                Sales
              </ion-label>
            </ion-item>
    
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button (click)="doLogout()" lines="none" class="menu_item">
              <ion-icon slot="start" name='exit'></ion-icon>
              <ion-label>
                Logout
              </ion-label>
            </ion-item>
    
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
        </ion-menu>
    <div class="ion-page" id="main-content">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-buttons slot="start">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon slot="icon-only" name="menu"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
          <ion-title>Brand Name</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">

        <ion-button (click)="openLink('/products')" expand="block" fill="clear" shape="round">
          Click me
        </ion-button>

      </ion-content>
    </div>

  </ion-split-pane>
</ion-app>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-back-button ></ion-back-button>
      </ion-buttons>
      <ion-title>Products</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

    <ion-button (click)="openDetails()" expand="block" fill="clear" color="primary">
      Details
    </ion-button>

  </ion-content>
</div>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-back-button ></ion-back-button>
      </ion-buttons>
      <ion-title>Product Details</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

产品
细节

My Product-details.page.html

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" >
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Brand Name</ion-title>
    
        </ion-toolbar>
      </ion-header>
    
      <ion-content>
        <div class="avatar_Container" >
          <ion-avatar class="image-center">
            <img src="https://image.freepik.com/free-vector/m-gold-logo-design_67734-93.jpg" >
          </ion-avatar>
          <h4 class="avatar_comp_name">{{this.mglobals.mcomp_name}}</h4>
          <p class="avatar_text">Welcome {{this.mglobals.muser_fname}}</p>
        </div>
      <ion-list>
          <ion-menu-toggle [autoHide]="false">
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='home'></ion-icon>
              <ion-label>
                Home
              </ion-label>
            </ion-item>
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button lines="none" class="menu_item" (click)="openLink('/products')">
              <ion-icon slot="start" name='pricetags-outline'></ion-icon>
              <ion-label>
                Items
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item" [routerLink]="['/customers']">
              <ion-icon slot="start" name='people-outline'></ion-icon>
              <ion-label>
                Customers
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-down-outline'></ion-icon>
              <ion-label>
                Vendors
              </ion-label>
            </ion-item>
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-down-outline'></ion-icon>
              <ion-label>
                Purchase
              </ion-label>
            </ion-item>
            <ion-item button lines="none" class="menu_item">
              <ion-icon slot="start" name='trending-up-outline'></ion-icon>
              <ion-label>
                Sales
              </ion-label>
            </ion-item>
    
            <ion-item-divider>  
            </ion-item-divider>
            <ion-item button (click)="doLogout()" lines="none" class="menu_item">
              <ion-icon slot="start" name='exit'></ion-icon>
              <ion-label>
                Logout
              </ion-label>
            </ion-item>
    
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
        </ion-menu>
    <div class="ion-page" id="main-content">
      <ion-header>
        <ion-toolbar color="primary">
          <ion-buttons slot="start">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon slot="icon-only" name="menu"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
          <ion-title>Brand Name</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">

        <ion-button (click)="openLink('/products')" expand="block" fill="clear" shape="round">
          Click me
        </ion-button>

      </ion-content>
    </div>

  </ion-split-pane>
</ion-app>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-back-button ></ion-back-button>
      </ion-buttons>
      <ion-title>Products</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

    <ion-button (click)="openDetails()" expand="block" fill="clear" color="primary">
      Details
    </ion-button>

  </ion-content>
</div>

<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-back-button ></ion-back-button>
      </ion-buttons>
      <ion-title>Product Details</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

产品详情

当我从主页导航到产品页面时，我没有返回按钮，产品页面的产品详细信息也是如此

---

请给我指出正确的方向和我在这里遗漏的东西。我觉得导航结构是个缺口。请告知。

在导航到下一页后，在检查元件中检查内部离子路由器插座，检查上一页是否存在，返回按钮应显示