angular - Ionic 4 默认菜单被隐藏,如何从图标打开菜单
问题描述
我已经创建了 Ionic 4 应用程序。问题是,我不希望它默认显示菜单,我使用以下代码隐藏了该菜单:
// Below code wll remove the menu bar
ionViewWillEnter() {
this.menuCtrl.enable(false);
}
但是,我的目的是显示菜单图标,单击该图标我希望打开菜单,我该如何管理?
编辑 1
我的home.page.ts
代码:
import { Component } from '@angular/core';
import {UserProvider} from '../../providers/user/user';
import { MenuController } from '@ionic/angular';
//import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public user:UserProvider,public menuCtrl: MenuController) {
console.log("inside constructor");
this.user.call_service('data').subscribe(datac => {
console.log(datac);
})
}
// Below code wll remove the menu bar
// ionViewWillEnter() {
// this.menuCtrl.enable(false);
// }
}
home.page.html
代码:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card class="welcome-card">
<img src="./assets/shapes.svg" alt="" />
<ion-card-header>
<ion-card-subtitle>Get Started 5 ..</ion-card-subtitle>
<ion-card-title>Welcome to Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>..Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
</ion-card-content>
</ion-card>
<ion-list lines="none">
<ion-list-header>
<ion-label>Resources</ion-label>
</ion-list-header>
<ion-item href="https://ionicframework.com/docs/">
<ion-icon slot="start" color="medium" name="book"></ion-icon>
<ion-label>Ionic Documentation</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/building/scaffolding">
<ion-icon slot="start" color="medium" name="build"></ion-icon>
<ion-label>Scaffold Out Your App</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/layout/structure">
<ion-icon slot="start" color="medium" name="grid"></ion-icon>
<ion-label>Change Your App Layout</ion-label>
</ion-item>
<ion-item href="https://ionicframework.com/docs/theming/basics">
<ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
<ion-label>Theme Your App</ion-label>
</ion-item>
</ion-list>
</ion-content>
编辑 2
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 {UserProvider} from '../providers/user/user';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
connection: any;
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
},
{
title: 'Party Master',
url: '/partym',
icon: 'list'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
)
{
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
编辑 3
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu type="overlay">
<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.component.html
<ion-app>
<ion-split-pane when="false"> // ADD FALSE on your split-pane tag it will hide menu
<ion-menu type="overlay">
<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>
推荐阅读
- javascript - 如何在 p5.js 中打开相机并检测鼻子
- amazon-web-services - 使 Terraform 忽略从服务返回的列表项的顺序
- python - 如何以给定的概率并基于分布更改 numpy 数组中的值?
- java - 如何维护多线程中给定约束的顺序?
- networking - 将数据从服务器发送到浏览器到另一台服务器
- python - 如何使用 selenium 运行 iframe 下一页上的按钮?
- python - 为什么 PyCharm 的调试器会打开 parse.py?
- javascript - /bin/sh: 1: node: 当我尝试在 vs code 中编写 runner 时未发现问题
- firebase - 删除的项目仍在部署
- google-apps-script - 如何遍历列中的每个单元格?