如何仅在特定视图中添加<离子菜单>？

Question

我是离子的新手，我想知道如何为一个组件(我的选项卡部分的第一个选项卡(添加<ion-menu>。 我该怎么做？

我需要添加这个：

<ion-menu [content]="mycontent">
<ion-content>
<button ion-button (click)="show_message()">
</buttont>
</ion-content>

这是我的代码：

https://stackblitz.com/edit/ionic-5bunxz?file=pages/contact/contact.ts

Answer 1

修改选项卡 1 页面(在您的情况下为关于页面(，如下所示

<ion-menu [content]="content">
<ion-header no-shadow no-border>
<ion-item no-lines>
<!-- Phase 2/3 PLEASE DO NOT DELETE THIS -->
<ion-avatar menuClose item-start> 
<!-- <ion-avatar menuClose item-start> -->
<img [src]="'assets/imgs/user.png'">
</ion-avatar>
<h2>Test Emp</h2>
<h3>test3333</h3>
<p>Test4564565</p>
</ion-item>
</ion-header>
<ion-content style="background: #fff">
<ion-list no-lines>
<ion-item class="drawer-item" menuClose >
<ion-icon name="home" item-start></ion-icon>
Test
</ion-item>
<ion-item class="drawer-item" menuClose  >
<ion-icon name="briefcase" item-start></ion-icon>
Test2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-header no-shadow no-border>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title text-uppercase>About</ion-title>   
</ion-navbar>
</ion-header>
<ion-content padding #content>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
</ion-content>

Answer 2

在应用组件页面中添加菜单组件代码。因此，您的 app.component.html 页面将如下所示。

<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Welcome Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" 
(click)="openPage(p)">
{{p.title}}
</button>        
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

您可以从组件文件添加动态页面，如下所示。 这是我的app.component.ts文件。

export class MyApp {
pages: Array<{title: string, component: any}>;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
this.pages = [{title: 'Home', component: HomePage},
{title: 'About', component: AboutPage}];
}
}

因此，现在此菜单栏将显示在应用程序的每个页面上。现在，假设您想在"关于"页面中隐藏此页面，那么您可以在"关于"页面的组件中编写以下代码。

export class AboutPage {
constructor(public navCtrl: NavController, public navParams: NavParams, 
public menu: MenuController) {}
ionViewDidEnter() {
//to disable menu, or
this.menu.enable(false);
}
}

因此，按照上述方法，您可以在任何页面中隐藏菜单按钮。