Navegación con parámetros

Clase 16 de 57 • Curso de Ionic Avanzado 2017

Contenido del curso

Introducción a Ionic

Estructura de nuestra App con Ionic

Basics de Angular y TypeScript

Agregando estilos con CSS a nuestra aplicación

Acceso a datos remotos

Opciones y Acceso Nativo

Conversación

Amigos

Deploy

Contenido Bonus

Tomar examen

Comentarios

Leonardo Omaña

student•

No se ve la pantalla 😦

Ricardo Celis

teacher•

Viene en camino la corrección! Qué te ha parecido el curso hasta ahora Leo?!

Juan Roberto Paz Ramos

student•

Aun esta pendiente la solución de la pantalla?

Juan C Felizzola

student•

Aún no se ve la pantalla, ¿por qué se demoran tanto en editar eso?

Juan Roberto Paz Ramos

student•

He estado intentando usar el routerLink pero no me redirecciona a la pagina de conversation y en los recurso que estan subidos no veo el ejemplo de como se usa.

Nelson Eduardo Visbal Jensen

student•

El routerLink es de angular y del nuevo ionic 4 (beta). Para este curso la solución es la siguiente:

Incorporar el evento click en la vista de home al momento de recorrer los “amigos”.

  <p>Amigos</p>
  <ng-container *ngFor="let user of this.friends">
    <div *ngIf="user.friend">
      <p (click)="goToConversation(user)">{{user.nick}} - {{user.nick}}</p>
    </div>
  </ng-container>```


2. Enviar a la página de conversación los datos que se necesitan, en este caso estoy enviando el usuario completo.

goToConversation(user: User){
this.navCtrl.push(ConversationPage,{“user”:user});
}````

En la página de conversación, recuperar el objeto.

@IonicPage()
@Component({
  selector: 'page-conversation',
  templateUrl: 'conversation.html',
})
export class ConversationPage {

  user:User;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.user = this.navParams.get("user");
    console.log("User", this.user);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ConversationPage');
  }

  goBack(){
    this.navCtrl.pop();
  }```

Espero y te sea de ayuda.

Juan Roberto Paz Ramos

student•

Podrias explicarme un poco sobre como haces el proceso del router link y como envias el uid a conversation ya que como no se puede ver en el video.

Wilson Fabian Pérez Sucuzhañay

student•

Pues el arrastra me devuelve error para subir la imagen así que al vieja confiable twitter jaja les pongo el enlace de como quedaría en ionic si alguien quiere código lo subo.

Wilson Fabian Pérez Sucuzhañay

student•

No se ve la pantalla o por dios platzi falla jaja, se nota que freddy estaba en Japón jaja

Maximiliano Delgado

student•

Cuando van a subir el video arreglado?

Diego Forero

Team Platzi•

Ya estamos trabajando y en los próximos días debe quedar solucionado.

Luis Morrison

student•

Hice esto pero utilizando el componente Lista de Ionic. Espero les sirva:

<ion-content>
  <ion-item-group>
    <ion-item-divider color="light">Agregados</ion-item-divider>
    <ng-container *ngFor="let user of friends; let i = index">
      <ion-item *ngIf="user.isFriend" (click)="viewConversation(user)">
        <ion-avatar item-start>
          <img src="https://api.adorable.io/avatars/150/{{user.uid}}.png">
        </ion-avatar>
        <h2>{{user.nickname}}</h2>
        <p>{{user.email}}</p>
      </ion-item>
    </ng-container>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider color="light">No Agregados</ion-item-divider>
    <ng-container *ngFor="let user of friends; let i = index">
      <ion-item *ngIf="!user.isFriend" (click)="viewConversation(user)">
        <ion-avatar item-start>
          <img src="https://api.adorable.io/avatars/150/{{user.uid}}.png">
        </ion-avatar>
        <h2>{{user.nickname}}</h2>
        <p>{{user.email}}</p>
      </ion-item>
    </ng-container>
  </ion-item-group>
</ion-content>

Carlos Uriel de Jesus Sánchez González

student•

el paso por parametros en ruta pone buena diferencia.

Alejandro Saenz

student•

Este curso esta mal, lo unico que hace es revolverme, primero empiezan con ionic 3 y luego cambian a ionic 4, pueden solucionarlo?

Albert Jiménez

student•

Deberian aclarar que esto es para IONIC V4 😦

Albert Jiménez

student•

Bien, vamos mejorando 😉

Jose Manuel Bobadilla Rivera

student•

En Ionic 5.2.4. el path: 'conversation/:uid' se edita en el archivo app-routing.module.ts

Roberto Bock

student•

mmm me parece que este video pertenece al curso avanzado de angular y no al de ionic estoy en lo cierto? se está usando el routerLink de angular pero en ionic usariamos un navCtrl.push(nombreDeVista)

Eddy Arellanes

student•

Para Ionic 4 el NavController queda obsoleto en favor del Angular Router, para tenerlo en cuenta 😃

Mario Alejandro Cortez Salinas

student•

Yo prefería NavController, se me hace mas sencillo 😕 pero gracias por el dato

Jonathan Rodriguez Osorio

student•

En Ionic 5.2.4 me funciono modificando el path dentro de conversation.module.ts

const routes: Routes = [
  {
    path: 'conversation/:uid',
    component: ConversationPage
  }
];```

  <p>Amigos</p>
  <ng-container *ngFor="let user of this.friends">
    <div *ngIf="user.friend">
      <p (click)="goToConversation(user)">{{user.nick}} - {{user.nick}}</p>
    </div>
  </ng-container>```


2. Enviar a la página de conversación los datos que se necesitan, en este caso estoy enviando el usuario completo.

@IonicPage()
@Component({
  selector: 'page-conversation',
  templateUrl: 'conversation.html',
})
export class ConversationPage {

  user:User;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.user = this.navParams.get("user");
    console.log("User", this.user);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ConversationPage');
  }

  goBack(){
    this.navCtrl.pop();
  }```

Espero y te sea de ayuda.

<ion-content>
  <ion-item-group>
    <ion-item-divider color="light">Agregados</ion-item-divider>
    <ng-container *ngFor="let user of friends; let i = index">
      <ion-item *ngIf="user.isFriend" (click)="viewConversation(user)">
        <ion-avatar item-start>
          <img src="https://api.adorable.io/avatars/150/{{user.uid}}.png">
        </ion-avatar>
        <h2>{{user.nickname}}</h2>
        <p>{{user.email}}</p>
      </ion-item>
    </ng-container>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider color="light">No Agregados</ion-item-divider>
    <ng-container *ngFor="let user of friends; let i = index">
      <ion-item *ngIf="!user.isFriend" (click)="viewConversation(user)">
        <ion-avatar item-start>
          <img src="https://api.adorable.io/avatars/150/{{user.uid}}.png">
        </ion-avatar>
        <h2>{{user.nickname}}</h2>
        <p>{{user.email}}</p>
      </ion-item>
    </ng-container>
  </ion-item-group>
</ion-content>

Navegación con parámetros

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios