如何添加<离子菜单>只在特定的视图?

时间:2018-06-10 17:22:04

标签: ionic-framework ionic2 ionic3

我是离子的新手,我想知道如何只为一个组件添加ask links [ set dif abs ([worldview] of end1 - [worldview] of end2) ] ask turtles with [ count my-links > 0 and color = blue] [ if random-float 1 < 1 / count my-links [ ask max-one-of my-links [dif] [die] ] ] (我的标签部分的第一个标签)。我怎么能这样做?

我需要补充一下:

<ion-menu>

这是我的代码:

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

2 个答案:

答案 0 :(得分:0)

修改标签页1(在您的情况下为AboutPage),如下所示

    <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>

答案 1 :(得分:0)

在应用程序组件页面中添加菜单组件代码。因此,您的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);
   }

}

因此,通过以上方法,您可以在任何页面中隐藏菜单按钮。