как добавить <ion-menu> только в конкретном представлении? - PullRequest
Новая
       7

как добавить <ion-menu> только в конкретном представлении?

0 голосов
/ 10 июня 2018

Я новичок в ionic и хочу знать, как добавить <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

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

добавьте свой код компонента меню на страницу компонента приложения.Итак, ваша страница 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);
   }

}

Итак, следуя вышеуказанному методу, вы можете скрыть кнопку меню в любомстраниц.

0 голосов
/ 11 июня 2018

Измените вкладку на 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>
...