从单页视图导航到离子4中的侧面menu布局

Question

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

• 登机页面显示了一些图像/文本
• 用户单击"启动"按钮后，一些标志 onboarded = true 写入本地存储
• 用户重定向到主要应用程序视图，即 ion-Split-pane 包含side-menu布局
• 下次用户启动应用程序时，我会检查他/她是否已经在板载屏幕上查看(通过检查的存在 inboarded var在存储中(，如果是 - 我立即将用户重定向正如我提到的，到具有侧面菜单布局的主应用，省略了登机屏幕。

我使用离子CLI启动了基于侧面模板的离子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']);
  }
}

---

main-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>

---

main-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>的用法存在问题，但找不到正确的解决方案。有人知道如何使它起作用吗？

谢谢！安德鲁。

Answer 1

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

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

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

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

我似乎还记得有关路由器的某些东西，没有该路由器无法正常工作。