Переход от просмотра одной страницы к расположению бокового меню в ionic 4 - PullRequest
Новая
       28

Переход от просмотра одной страницы к расположению бокового меню в ionic 4

0 голосов
/ 03 мая 2019

Я бы хотел создать приложение с использованием Ionic 4, которое упрощенно работает следующим образом:

  • На странице загрузки отображается несколько изображений / текст
  • После того, как пользователь нажал кнопку «Пуск», в локальное хранилище записывается флаг onboarded = true
  • Пользователь перенаправлен в главное окно приложения, представляющее собой ion-split-pane , содержащее макет бокового меню
  • В следующий раз, когда пользователь запускает приложение, я проверяю, просматривал ли он / она уже находящийся на экране экран (проверяя наличие загруженного 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']);
  }
}

основной 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>

Основные-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 Ответ

0 голосов
/ 04 мая 2019

попробуйте добавить contentId="content" к вашему <ion-menu>

т.е.: <ion-menu contentId="content">

, а также добавьте id="content" к вашему <ion-router-outlet>

, то есть: <ion-router-outlet id="content" main>

Кажется, я кое-что помню о том, что розетка маршрутизатора без этого не работает.

...