如何在Ionic 4中切换菜单 [英] How to toggle Menu in Ionic 4
问题描述
我是Ionic的新手,我正在使用sidemenu
在Ionic 4中开发一个基本应用程序.
I am new to Ionic, and I am developing a basic app in Ionic 4 with sidemenu
.
我要在侧面菜单中添加一个按钮,当我单击该按钮时,菜单不会切换.有人可以帮我吗? 这是我正在尝试的代码.
I am adding a button in Side Menu, when I am clicking on that button the menu is not toggling. can anyone help me in this ? here's the code which I am trying.
<ion-button color="primary" (click)="function()" class="class" menuToggle expand="block" fill="outline">
text
</ion-button>
<ion-button color="primary" (click)="function()" class="class" menuToggle expand="block" fill="outline">
text
</ion-button>
不重复问题的说明
Explanation of not Duplicate question
请检查粗体字,我已经有一个正常工作的副菜单,但是问题是我想在单击ion-button
而不是ion-item
时关闭该副菜单.
Please check the Bold text, I already have a working sidemenu, but the problem is I want to close the sidemenu when I click on ion-button
, not on ion-item
.
推荐答案
只需将ion-button
封装在ion-menu-toggle
元素中,就像这样:
Simply encapsulate your ion-button
within an ion-menu-toggle
element, like so:
<ion-menu-toggle>
<ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
如果您不想使用ion-menu-toggle
,则可以执行以下操作:
If you don't want to use ion-menu-toggle
, you can do this instead:
在您的app.component.ts中:
In your app.component.ts:
import { MenuController } from '@ionic/angular'; //import MenuController to access toggle() method.
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(
public menuCtrl: MenuController
) {
this.initializeApp();
}
toggleMenu() {
this.menuCtrl.toggle(); //Add this method to your button click function
}
}
在您的app.component.html中:
And in your app.component.html:
<ion-button (click)="toggleMenu()">Toggle Menu</ion-button>
要查看所有方法,请在此处检查文档.
这篇关于如何在Ionic 4中切换菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!