ionic4侧边栏事件

1.引入静态变量---XXX.page.ts

import { MenuController, ActionSheetController, Platform, AlertController  } from '@ionic/angular';

constructor(public http: InterceptorService,
    public storage: Storage,
    public menu: MenuController) { }

2.html

<ion-menu side="end">
  <ion-header translucent>
    <ion-toolbar color="secondary">
      <ion-title>您负责的分组</ion-title>
    </ion-toolbar>
  </ion-header> 

  <ion-content>
    <ion-list *ngFor="let item of groupList">
      <ion-item (click)="groupInfo(item.groupId)" style="font-size:18px;">{
   
   {item?.groupName}}</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

3.ts

 getData() {
    // 侧边栏显示分组
    const batch = '201811';
    const userId = 'LjhR7NddwRanoKU6bfC9yb';
    const urL = 'physical-web/userGroup/queryByUserId/' + userId + '/' + batch;
    this.http.get(urL).subscribe(
      ref => {
        if (ref.json().code === '0000') {
          this.groupList = ref.json().data;
          this.groupIdList = this.groupList[0].groupId;
          this.studentInfo(this.groupIdList);
          this.passNum(this.groupIdList);
          this.titlenameload(this.groupIdList);
          this.groupList.forEach(
            red => {
              this.groupIdList = red.groupId;
              this.groupArray.push({ groupId: this.groupIdList });
            }
          );
        }
      });
  }

点击某项关闭侧边栏：

 this.menu.close();

4.效果图

猜你喜欢