ionic 测滑菜单

.html

<ion-content id="menu" #content>
   页面内容
   ...
</ion-content>

<!-- 侧滑菜单 -->
<app-org-selector [org_list]="org_list" contentId="menu" (onOK)="onOrgChanged($event)"> </app-org-selector>

//此处注意:id="menu"与contentId="menu"一定要一致


.ts

onOrgChanged(org) {
        this.ORG_NAME = org.name;
        this.ORG_ID = org.id;
}


components
.html

<ion-menu swipeGesture="false"  [contentId]="contentId" mode="ios" side="end" menuId="org_menu">
  <ion-header>
    <ion-toolbar mode="ios">
      <ion-title>
        请选择单位名称
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- 单位树型菜单 -->
    <app-tree [list]="org_list" name_field="label" (onChange)="selectOrg($event)"> 
    </app-tree>
  </ion-content>

  <ion-footer>
    <ng-container >
      <ion-button class="buttonCancel" (click)="closeMenu()" fill="outline">
        取消
      </ion-button>
      <ion-button class="buttonOK" (click)="buttonOK()">
        确定
      </ion-button>
    </ng-container>
  </ion-footer>
</ion-menu>

.ts

 @Input() org_list;
 @Input() menuId;
 @Input() contentId;
 @Output() onOK = new EventEmitter();
 public org_selected: any = {};


  constructor(){

  }

  //选择单位（菜单中）
  selectOrg(org) {
    this.org_selected = org;
  }

  //侧栏菜单的确定
  buttonOK() {
    if (!Object.keys(this.org_selected).length) {
      this.toast.showToast('请选择单位');
      return;
    }
    this.onOK.emit(this.org_selected);
    this.closeMenu();
  }

  // 关闭侧栏菜单
  closeMenu() {
    this.menuController.close();
  }