代码之家 › 专栏 › 技术社区 › Aldeguer

将页参数从视图传递到控制器

ionic-view ionic2 ionic-framework

0

Aldeguer · 技术社区 · 7 年前

我对爱奥尼亚很陌生,现在我很迷茫:

我有以下HTML:

<ion-menu [content]="mainContent">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Menu
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content id="side-menu21">
    <ion-list id="menu-list1">
      <ion-item color="none" id="menu-list-item1" (click)="gotoTabPending();">
        Pendientes
      </ion-item>
      <ion-item color="none" id="menu-list-item2" (click)="gotoTabDone();">
        Realizadas
      </ion-item>
      <ion-item color="none" id="menu-list-item3" (click)="gotoTabAll();">
        Todas
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mainContent [root]="rootPage"></ion-nav>

它们调用这三种方法:

gotoTabPending(){
    this.navCtrl.push(PendingTasksPage);
    this.menuCtrl.close();
}

gotoTabDone(){
    this.navCtrl.push(DoneTasksPage);
    this.menuCtrl.close();
}

gotoTabAll(){
    this.navCtrl.push(AllTasksPage);
    this.menuCtrl.close();
}

我试图把这些方法统一起来,比如:

<ion-item color="none" id="menu-list-item3" (click)="gotoTab(AllTasksPage);">

gotoTab(param){
  this.navCtrl.push(param);
  this.menuCtrl.close();
}

但是,这不起作用并启动异常:

我一直在做一些研究,但没有发现任何有用的东西。有办法吗?

提前谢谢

1 回复 | 直到 7 年前

1

0

Shriniwas b 7 年前

你可以这么做…

export interface PageInterface {
  title: string;
  name: string;
  index?: any;
}

appPages: PageInterface[] = [
    { title: 'Pendientes', name: PendingTasksPage, index: 0 },
    { title: 'Realizadas', name: DoneTasksPage, index: 1 },
    { title: 'Todas', name: AllTasksPage, index: 2 },
];

gotoTab(x){
    this.navCtrl.push(x.name);
    this.menuCtrl.close();
}

<ion-menu [content]="mainContent">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Menu
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content id="side-menu21">
    <ion-list id="menu-list1">
      <ion-item *ngFor="let x of appPages" color="none" id="menu-list-item1" (click)="gotoTab(x);">
        {{x.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mainContent [root]="rootPage"></ion-nav>