One page with list of pages, and when i click in a page go to it (Uma página com lista de outras páginas)

Ionic Framework ionic-v3
1

Gostaria de saber como que eu faço, por exemplo,pagina que irá listar as outras páginas:APP,SITE,etc:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';


/*navParams receive params one page for other page  */
@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

    // Let's populate this page with some filler content for funzies
    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
    'american-football', 'boat', 'bluetooth', 'build'];

    this.items = [];
    for (let i = 1; i < 11; i++) {
      this.items.push({
        title: 'Item ' + i,
        note: 'This is item #' + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }

  itemTapped(event, item) {
    // That's right, we're pushing to ourselves!
    this.navCtrl.push(ListPage, {
      item: item
    });
  }
}

----------------------------HTML------------------

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon [name]="item.icon" item-start></ion-icon>
      {{item.title}}
      <div class="item-note" item-end>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content

>

Este código acima é o do padrão do template sidemenu.

O que eu quero fazer é que este array de item contenha as páginas: APP, Site, etc, ai a pessoa clica em por exemplo, APP, vai para ela.

Seria algo como :

items = [
      { title: 'Aplicativo', component: AppPage},

      { title: 'Site', component: SitePage},
    ];

  itemSelected(page) 
  {
    this.navCtrl.push(page.component);
  }
}

Alguém me dá um help?Obrigada

2

Hola,
así son las cosas. Usted debe proporcionar la página, pero con una importación primero.

import { AppPage} from '../pages/app/app';
import { SitePage } from '../pages/site/site';

items = [
      { title: 'Aplicativo', component: AppPage},

      { title: 'Site', component: SitePage},
    ];

  itemSelected(page) 
  {
    this.navCtrl.push(page.component);
  }
}

Es más fácil con “lazyloading”, entonces sólo necesita el “string²” en lugar del objeto.

Además, haz la pregunta en inglés, y ellos responderán a más gente.

Best regards, anna-liebt

3

@anna_liebt pode me dar um exemplo? Can u give a example, please?

4

Hello,

how to handle navigation with an array of objects with component you can see in app.component of sidemenu starter app. It is like above described. For lazy loading you can use a string that is exactly the same as your component declaration. For example

 this.navCtrl.push(SidePage); //eager loading
 this.navCtrl.push("SidePage");//lazy loading.

Best regards, anna-liebt

1 Like