Question

我在那里！我是打字稿和Ionic的新手。当我按下侧面菜单中的“ 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)

  }
}

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

如何为侧面菜单中的特定选项提供功能

1 个答案: