Navegar a un page

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

Victor Polanco Plata

student•

Para poder utilizar el this.navCtrl.push(LugarPage); es necesario tener importada la clase Lugar Page donde se quiera utilizar.

Cristian Camilo Rodriguez

student•

En la v4 ionic 4
Hay tres tipos principales de rutas
Ansioso: Rutas que apuntan a un solo componente.
Perezoso: Rutas que apuntan a un módulo.
Redirigir: Rutas que redireccionan a otra ruta.
puedes modificarlas en el archivo app-routing.modules.ts, y puedes investigar para que sirve cada una, like si quieres un tutorial para explicar mas a afondo este tema 😉

creas la pagina se crea un archivo app-routing.modules.ts

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'newpag', loadChildren: './newpag/newpag.module#NewpagPageModule' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }```

y enlazas en tu botom podemos utilizar routerLink
para enlazar paginas

<ion-content padding> <ion-button expand=“full” routerLink="/newpag">newpage</ion-button> </ion-content>```

espero sirva

Hector Alberto Lopez Fabian

student•

Muchas gracias, me sirvió de ayuda tu explicaciones

Mauricio Rivera

student•

Actualmente ionic viene incorporado con angular router, instalé la version 3.2 de ionic y el sistema de rutas cambia. Comparto cómo lo hice en el home.page.ts. Es mucho más simple y no requiere de declarar las vistas en el app.module.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private router: Router){}

  irALugar(){
    this.router.navigateByUrl('/lugar');
  }
}

julio.franco.sb

student•

Gente que le pone el alma !!

julio.franco.sb

student•

Para que se vea el botón de back hay que agregarlo en el lugar.page.html

Jesus Contreras

student•

Hay que tener en cuenta que ese IDE agrega el Import Automaticamente.

Mariano Alberto Martinez

student•

El Editor “Visual Studio Code” también lo hace de manera automática. Saludos!

Carlos Andrés Charris S

student•

Puedes navegar entre paginas de dos maneras:

Adicionando el componente en el app.module.ts y this.navCtrl.push(LugarPage);
solamente usando this.navCtrl.push('LugarPage'); sin importar nada en el app.module.ts ni en entryComponents

en la versión 4 de Ionic la navegación se mejora mucho usando el archivo app-routing.module.ts

Alfonso Navarro

company_admin•

Muchas gracias por tu respuesta con relación a Ionic 4 el cual es la ultima versión de este Framework, sugiero deberían actualizar este curso a esta version.

JAIME VARGAS

student•

Totalmente, estoy empezando en IONIC y es complicado porque existen varios cambios significativos entre versiones :(

Juan C Felizzola

student•

Usamos this.navCtrl porque lo estamos importando y nombrando directamente en el constructor

import { NavController } from 'ionic-angular';

constructor(public navCtrl: NavController) { }

Alvaro Diaz

student•

Yo ya estoy trabajando con Ionic 5 y ya todo cambió , no sirven las instrucciones del profe ni las contribuciones de los estudiantes, fui a la página de ionic y dice que en ruta igual que en Angular, pero Angular ya va en el 8, así que no sé que hacer para que funcione

Juan Pablo Cano Buitrago

student•

Hola, no te preocupes, el routing en Angular no ha cambiado mucho para la versión 8, si quieres navegar entre paginas puedes usar una propiedad de tipo Router en el contructor de una clase, a ese router le invocas el navigateByUrl, funciona de igual manera y perfectamente.

Juan Guillermo Perez Cardozo

student•

encontre 2 formas para hacerlo en ionic 4 :

<ion-button color="primary" href='/lugar'>lazy mode</ion-button>
hacer un metodo y llamarlo on click this.router.navigateByUrl('./lugar');

Juan Guillermo Perez Cardozo

student•

(’./lugar’); en esta parte quitar punto, que pena se me fue.

Claudia Ibarra

student•

En IOnic 4 NavController ya no existe y las rutas han cambiado. He migrado el código usando el módulo Router, sin embargo como las rutas cambiaron, no me funciona.

Jorge Luis Paiva Huamán

student•

Para ionic5: <ion-button routerLink="/lugar" routerDirection="forward">Lugar</ion-button>

Alex Camacho

teacher•

¡Hola Coco, Muchas gracias por el aporte. ¡Nunca pares de aprender! 💚

Jorge Luis Paiva Huamán

student•

Que extension en visual code se puede usar para autocompletar los ion-footer por ej.

Jesus David Mendez Coronell

student•

al parecer en Ionic 4 al crear el la pagina por medio de ionic generate Nombre page, automaticamente se agrega la ruta en el appa-routing, y solo es usar el routerLink para cambiar de pagima

VICTOR JUAREZ PALAFOX

student•

Eso es correcto

Rafael Eldanoy Ensuncho Bechara

student•

Es importante saber que hay que dale una noción a nuestra vista por que auque este creada la nueva pagina nuestro proyecto no lo sabe, o no entiende que lo queremos usar, entonces es donde debemos declarar que la vamos a utilizar, para eso vamos a app.module.ts y en declarations vamos a ver que esta declarado el Home, luego del Home vamos a declarar nuestra nueva Page que es LugarPage, lo mismo hay que hacer en entryComponents donde también esta declarado el Home, y que también declararemos el LugarPage.

Rafael Eldanoy Ensuncho Bechara

student•

Sinceramente tengo mucho que aprender

Platzi Team

student•

Es decir que no es obligatorio cargar las páginas en el entryComponent?

Ricardo Portillo

student•

Para lo que ven en el curso en 2019 este tema cambio en IONIC ahora se usa routerlink ya que NavController cambio y no cuenta con el método push.

Para que salga el botón de "Back" como sale en el ejemplo deben agregar en place.page.html dentro de la etiqueta ion-toolbar el siguiente código.

 <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>

Espero que esto aclare a lo estudiantes que no le funciona lo dicho en el 2019

VICTOR JUAREZ PALAFOX

student•

Gracias por la sugerencia, funcionó perfectamente

Israel Antonio Morales Vargas

student•

Ya se navega a Lugar pero no genera el boton regresar aunque ya agrege el código.

Tamara Nuñez Padilla

student•

actualicen la versión!

Wilson Gustavo Chango Sailema

student•

home.page.html

&lt;ion-header [translucent]=&quot;true&quot;&gt;
  &lt;ion-toolbar&gt;
    &lt;ion-title&gt;
      Blank
    &lt;/ion-title&gt;
  &lt;/ion-toolbar&gt;
&lt;/ion-header&gt;

&lt;ion-content [fullscreen]=&quot;true&quot;&gt;
  &lt;ion-button color=&quot;primary&quot; routerLink=&quot;/lugar&quot;&gt;Lugar&lt;/ion-button&gt;
&lt;/ion-content&gt;
&lt;ion-footer&gt;
 &lt;ion-toolbar&gt;
   &lt;ion-title color=&quot;primary&quot;&gt;Curso Ionic&lt;/ion-title&gt;
 &lt;/ion-toolbar&gt;

&lt;/ion-footer&gt;

Christiaan Guzman Dominguez

student•

uff gracias

Carlos Uriel de Jesus Sánchez González

student•

ionic generate page <Nombre>
	import { NavController }from'ionic-angular';
	constructor(public navCtrl: NavController){ }
	this.navCtrl.push(<componente>);

Jose Valderrama

student•

Saludos a todos. Tengo un problema en este punto. Es sobre Navctrl… el còdigo que me generò a mi es distinto que se ve en el curso. La parte de entryComponentes tampoco es igual. Esto debe ser por alguna actualizacion de ionic. A pesar de que he importado el Navcontroller de forma manual me provoca un error. En la aplicacion queda toda blanca … Como podre solucionar esto no puedo hacer navegaciones.

<code>
import { NavController }from'ionic-angular';

Jose Valderrama

student•

Alguien me ayuda…!!

christian jordy mamani sucasaire

student•

tu tambien estas trabajandon con ionic 4 …creo q el tutorial lo hicieron con la v3…tengo el mismo problema 😦

Navegar a un page

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

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados

Alineación y transformación de texto

Padding y Márgenes

CRUD en Ionic y Firebase

Generar proyecto e instalar dependencias

Agregar y configurar AngularFire

Agregar servicio de acceso a datos

Crear una lista con array estático

Crear una vista para agregar records

Agregar la habilidad de ver records

Crear lista dinámica y agregar la habilidad de editar records

Agregar la habilidad de eliminar records

Implementando Login con Facebook

Deployment

Correr aplicaciones en emulador

Correr aplicación en dispositivos Android

Correr aplicación en dispositivos iOS

Publicando nuestra aplicación en Android y iOS stores

Conclusiones del curso