Parámetros de navegación

Clase 16 de 36 • Curso Básico de Ionic 2018

Contenido del curso

Introducción

Aspectos Básicos

Navegación

Estilos (Theming)

CRUD en Ionic y Firebase

Deployment

Tomar examen

Comentarios

Nathaly Stefani Riaño Bejarano

student•

Si se tiene una vista en común, es importante que ésta vista sepa desde donde se está llamando.

home.ts
Especificar el argumento a la función navegarALugar(name) { }

home.html

Button1 -> (click)="navegarALugar('Primer Lugar')"
Button2 -> (click)="navegarALugar('Segundo Lugar')"

lugar.html
Mediante String Interpolation obtenemos el valor de nombreLugar
<ion-content padding> {{nombreLugar}} </ion-content>

lugar.ts
Especificar la variable nombreLugar:string = '';

home.ts
Enviarle el parámetro nombre de la vista al navCtrl
navegarALugar(name) { this.navCtrl.push(LugarPage, {nombre: name}); }

lugar.ts
Capturar el nombre en la siguiente vista (Lugar)
constructor(public navCtrl: NavController, public navParams: NavParams) { this.nombreLugar = navParams.get('nombre'); }

Diego Diego Cruz

student•

buen aporte 😄

Miguel Hernández

student•

Esto es lo que logre con el about

Platzi Team

student•

Que bueno, como hiciste el cuadro?

Luis Javier del Campo Flores

student•

Con el componente card puedes hacer el cuadro

Jesus David Mendez Coronell

student•

Estas clases solo sirven como guia sobre que investigar, ya que Ionic 4 tiene muchisimos cambios importantes, intente instalar Ionic 3 pero no me deja

David Eliezer Orantes González

student•

Para el minuto 3:43 la forma de declarar las variables es:

this.navCtrl.push(LugarPage, {nombre: name});

Juan Guillermo Perez Cardozo

student•

compañeros de aprendizaje , aca les dejo una explicacion que encontre de como ha cambiado este para ionic 4. https://www.youtube.com/watch?v=5bPTI7mQbSQ

Juan C Felizzola

student•

El icono que usé para el reto fue:

<ion-tab tabTitle="About" tabIcon="person" [root]="tab3Root" ></ion-tab>

Aquí está el resutado:

Christian Gonzalez

student•

Buenas tardes, me da error cuando intento pasarle params: {nombre:name}

navegarAlLugar(name)
{
this.navCtrl.push(LugarPage,params: {nombre: name});
}

[ts] se esperarba,
[ts] no se encuentra el nombre ‘params’
[ts] no se puede asignar un argumento de tipo "{nombre:any;} al parametro de tipo NavOptions

Sergio Correa Lopez

student•

Me paso lo mismo, ocupa esta linea:

navegarALugar(name) {
this.navCtrl.push(LugarPage, {nombre :name});
}

Sergio Correa Lopez

student•

me falto indicar que el cambio es en la pagina “home.ts”

Saludos

bruno braner sülzer

student•

Buenas Eduardo, Estoy con el Ionic 6 y el código que enseñas en los videos no me corre y no será porque estás usando el ionic en su versión 3

Juan Guillermo Perez Cardozo

student•

gracias por la explicacion

Jesús Olivares Olivares Suarez

student•

this.navCtrl.push(LugarPage,params: {nombre: name});
porque así no nos funciona.?

funciona es así:
this.navCtrl.push(LugarPage, {nombre: name});

David Toca

student•

No se mucho de javascript, pero yo diria que el segundo parametro le llega con un json con un json adentro, y en el segundo se llega solo un json, y la funcion espera simplemente un json

Ana Maria Cubides Acosta

student•

sobra la palabra params, en el video se visualiza por el editor, pero mira que se ve sombreada, es indicando que se van a pasar parametros.

Carlos Enrique Ramírez Flores

student•

Diego Diego Cruz

student•

   <ion-tab tabTitle="About" tabIcon="ios-information-circle" [root]="tab3Root"></ion-tab>

Carlos Uriel de Jesus Sánchez González

student•

muy buena forma sencilla de navegacion

yhoiner Morales Rios

student•

Reto ![](

Platzi Team

student•

Wow el curso va genial.
¿Qué es más rápido para desarrollar aplicaciones ReactNative o Ionic?

Eduardo José Álvarez

Team Platzi•

en lo personal prefiero React Native, igual Expo puede servirte para hacer un app muy rápidamente.

Juan Manuel Viveros Martinez

student•

Acerca de:

<ion-header>

  <ion-navbar>
    <ion-title>Acerca de</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    
  <ion-card>
    <img src="https://instagram.fclo5-1.fna.fbcdn.net/vp/0f6ed9507b10302cb0227aa45d072f42/5C3D8902/t51.2885-15/e35/32887913_209617129658397_726695749085036544_n.jpg"/>
    <ion-card-content>
      <ion-card-title>Juan Manuel Viveros</ion-card-title>
      <p>
        Soy desarrollador web y móvil, estoy muy interesado en aprender más sobre ionic para actualizar conocimientos.
      </p>
    </ion-card-content>
    <ion-item>
      <ion-icon name="logo-instagram" item-start></ion-icon>
      Seguidores
      <ion-badge item-end>520</ion-badge>
    </ion-item>
  </ion-card>
  
</ion-content>

Pedro Roberto Capriles Morales

student•

Pagina de About

<code>
<!--
  Generated template for the AboutPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>about</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card>
    <div class="img-content">
        <ion-img src="../../assets/imgs/about.png" class="card-image"></ion-img>
    </div>

    <ion-card-header>
          
      <ion-card-title>Sobre Mí</ion-card-title>
 
    </ion-card-header>
  
    <ion-card-content>
      <p>
        Desarrollador en constante aprendizaje.
      </p>
      <ion-icon name="logo-linkedin"></ion-icon>
      <a href="http://linkedin.com/in/caprilespe">Perfil en Linkedin</a>
    </ion-card-content>
  </ion-card>
</ion-content>

<!--Pagina de Tabs-->




<ion-tabs>
  <ion-tab tabTitle="Feed" tabIcon="megaphone" [root]="tab1Root"></ion-tab>
  <ion-tab tabTitle="Perfil" tabIcon="cog" [root]="tab2Root"></ion-tab>
  <ion-tab tabTitle="About" tabIcon="book" [root]="tab3Root"></ion-tab>
</ion-tabs>

Andres Ramirez

company_admin•

Si estan trabajando con Ionic 4, el siguiente link indica como se hace el envío de parametros

https://cursos.mejorcodigo.net/article/rutas-y-navegacion-en-ionic-4-67

Nathaly Stefani Riaño Bejarano

student•

<ion-header>

  <ion-navbar>
    <ion-title>Acerca de</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    
  <ion-card>
    <img src="https://instagram.fclo5-1.fna.fbcdn.net/vp/0f6ed9507b10302cb0227aa45d072f42/5C3D8902/t51.2885-15/e35/32887913_209617129658397_726695749085036544_n.jpg"/>
    <ion-card-content>
      <ion-card-title>Juan Manuel Viveros</ion-card-title>
      <p>
        Soy desarrollador web y móvil, estoy muy interesado en aprender más sobre ionic para actualizar conocimientos.
      </p>
    </ion-card-content>
    <ion-item>
      <ion-icon name="logo-instagram" item-start></ion-icon>
      Seguidores
      <ion-badge item-end>520</ion-badge>
    </ion-item>
  </ion-card>
  
</ion-content>

<code>
<!--
  Generated template for the AboutPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>about</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card>
    <div class="img-content">
        <ion-img src="../../assets/imgs/about.png" class="card-image"></ion-img>
    </div>

    <ion-card-header>
          
      <ion-card-title>Sobre Mí</ion-card-title>
 
    </ion-card-header>
  
    <ion-card-content>
      <p>
        Desarrollador en constante aprendizaje.
      </p>
      <ion-icon name="logo-linkedin"></ion-icon>
      <a href="http://linkedin.com/in/caprilespe">Perfil en Linkedin</a>
    </ion-card-content>
  </ion-card>
</ion-content>

<!--Pagina de Tabs-->




<ion-tabs>
  <ion-tab tabTitle="Feed" tabIcon="megaphone" [root]="tab1Root"></ion-tab>
  <ion-tab tabTitle="Perfil" tabIcon="cog" [root]="tab2Root"></ion-tab>
  <ion-tab tabTitle="About" tabIcon="book" [root]="tab3Root"></ion-tab>
</ion-tabs>

Parámetros de navegación

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs