如何为侧菜单中的特定选项赋予功能

Posted 2023-03-22

【中文标题】如何为侧菜单中的特定选项赋予功能

【英文标题】：How to give a function to specific option in side menu

【发布时间】：2019-04-30 16:26:05

【问题描述】：

我在那儿！我是打字稿和离子的新手。当我按下侧面菜单中的“Mercado”选项时，我必须调用一个清除购物车的函数，但我没有收到页面数据如何获取页面数据？下面的代码是我试图获取数据但没有工作的代码

app.component.html

<ion-menu side="end">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list >
      <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index" >
        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)= "apagarCarrinho(p)">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label>
            p.title
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>

app.component.ts

import  CarrinhoService  from './carrinho.service';
import  ProdutosService  from './produtos.service';
import  LoginService  from './login.service';
import  Component  from '@angular/core';

import  Platform, NavController, ToastController, AlertController  from '@ionic/angular';
import  SplashScreen  from '@ionic-native/splash-screen/ngx';
import  StatusBar  from '@ionic-native/status-bar/ngx';





@Component(
  selector: 'app-root',
  templateUrl: 'app.component.html'
)
export class AppComponent 
  view:any;
  public appPages = [

    
      title:'Mercado',
      url: '/menu',
      icon:'basket',
      component: 'mercadoPage'
    ,

    
      title:'Log Out',
      url: '/logout',
      icon: 'close-circle-outline',
      component: 'logoutPage'
    ,





  ];
  public idMercado
  public pageClicada
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private navCtrl: NavController,
    private LoginService: LoginService,
    private toastCtrl: ToastController,
    public alertCtrl: AlertController,
    public ProdutosService: ProdutosService,
    public CarrinhoService: CarrinhoService
  ) 
    this.initializeApp();
    this.platform = platform;



  

  initializeApp() 
    this.platform.ready().then(() => 
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    );
  

  async apagarCarrinho(page)
    this.pageClicada = page
    console.log(this.pageClicada)

  

【参考方案1】：

我的工作与您所做的完全相同。 或者，您也可以这样做。

    <ion-app>
    <ion-split-pane>
      <ion-menu>
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
              <ion-menu-toggle auto-hide="false" persistent="true">
                  <ion-item [routerDirection]="'root'" (click)="goToHome()">
                      <ion-icon color="tertiary" slot="start" name="information-circle-outline" item-left></ion-icon>
                      <ion-label>
                          Home
                        </ion-label>
                    </ion-item>
                    <ion-item [routerDirection]="'root'" (click)="clearBasket()">
                      <ion-icon color="tertiary" slot="start" name="information-circle-outline" item-left></ion-icon>
                      <ion-label>
                          Clear Basket
                        </ion-label>
                    </ion-item>
                </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
      <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
  </ion-app>