angular-ui-router - 在 ionic 4 中从单页视图导航到侧面菜单布局
问题描述
我想使用 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']);
}
}
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>
主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>
's 的使用存在问题,但找不到正确的解决方案。有谁知道如何使它工作?
谢谢!安德鲁。
解决方案
尝试添加contentId="content"
到您的<ion-menu>
IE:<ion-menu contentId="content">
并添加id="content"
到您的<ion-router-outlet>
IE:<ion-router-outlet id="content" main>
我似乎记得路由器插座没有它就无法工作。
推荐阅读
- kde - 如何列出每个 KDE/Plasma5 活动的窗口
- python-3.x - 将PNG图像加载到
- python - 我有一个包含一系列问题的列表。我希望这些问题中的每一个都进入单独的 .txt 文件。我怎么做?
- flutter - Flutter - 将宽度设置为 TextFormField
- .net - Palmx (Zijang) ZJ8330热敏打印机土耳其字符问题用c#
- javascript - 从单独的 js 文件中导出图像和字体真棒图标
- jquery - 切换未正确显示
- php - 带有 MASK 的 TYPO3 Linkvalidator 扩展
- javascript - 从'react-range-slider'禁用反应输入范围滑块
- excel - 在 Excel 中,我想计算某些食谱的库存成分