在 ionic 4 中从单页视图导航到侧面菜单布局

Posted 2023-03-22

【中文标题】在 ionic 4 中从单页视图导航到侧面菜单布局

【英文标题】：Navigating from single page view to side-menu layout in ionic 4

【发布时间】：2019-05-03 15:18:35

【问题描述】：

我想使用 Ionic 4 构建一个简单地按以下方式工作的应用程序：

入职页面显示有一些图片/文字 用户点击“开始”按钮后，一些标志

onboarded=true

被写入本地存储 用户被重定向到主应用视图，这是一个包含侧边菜单布局的

ion-split-pane

下次当用户启动应用程序时，我会检查他/她是否已经查看了登录屏幕（通过检查存储中是否存在

onboarded

var），如果是 - 我会立即重定向用户到我提到的具有侧面菜单布局的主应用程序，省略了引导屏幕。

我使用 ionic cli 启动了这个项目，基于侧边菜单模板，为了实现上述逻辑，我对其进行了如下修改：

app.component.ts

import  Component  from '@angular/core';
import  Platform  from '@ionic/angular';
import  SplashScreen  from '@ionic-native/splash-screen/ngx';
import  StatusBar  from '@ionic-native/status-bar/ngx';
import  Storage  from '@ionic/storage';
import  Router  from '@angular/router';

@Component(
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
)
export class AppComponent 

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private storage: Storage,
    private router: Router
  ) 
    this.initializeApp();
  

  async initializeApp() 

    await this.platform.ready();

    this.statusBar.styleDefault();

    this.splashScreen.hide();

    const onboarded = await this.storage.get('onboarded');

    if (onboarded) 

      this.router.navigate(['main-app']);

     else 

      this.router.navigate(['onboarding']);
    
  

---

onboarding.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>onboarding</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
Welcome aboard!
<ion-button (click)="start()">Start app!</ion-button>
</ion-content>

---

onboarding.page.ts

import  Component  from '@angular/core';
import  Storage  from '@ionic/storage';
import  Router  from '@angular/router';

@Component(
  selector: 'app-onboarding',
  templateUrl: './onboarding.page.html',
  styleUrls: ['./onboarding.page.scss'],
)
export class OnboardingPage 

  constructor(
    private storage: Storage,
    private router: Router
  )  

  start() 

    this.storage.set('onboarded', true);

    this.router.navigate(['main-app']);
  

---

ma​​in-app.page.html

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                p.title
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

---

ma​​in-app.page.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-main-app',
  templateUrl: './main-app.page.html',
  styleUrls: ['./main-app.page.scss'],
)
export class MainAppPage 

  public appPages = [
    
      title: 'Home',
      url: '/home',
      icon: 'home'
    ,
    
      title: 'List',
      url: '/list',
      icon: 'list'
    
  ];

  constructor()  

---

列表和主页只是空白页面，它们的内容对于本示例并不重要 问题是包含侧边菜单和内容的主应用程序无法正常工作。我知道<ion-router-outlet main></ion-router-outlet> 的使用存在问题，但找不到合适的解决方案。 有谁知道如何使它工作？

谢谢！ 安德鲁。

【参考方案1】：

尝试将contentId="content" 添加到您的<ion-menu>

即：<ion-menu contentId="content">

并将id="content" 添加到您的<ion-router-outlet>

即：<ion-router-outlet id="content" main>

我似乎记得路由器插座没有它就无法工作。

【讨论】：

是的，我已经在文档中阅读了有关此 ID 的信息并添加了它，但它也不起作用