Clase 14 de 36 • Curso Básico de Ionic 2018
Contenido del curso
Victor Polanco Plata
Cristian Camilo Rodriguez
Hector Alberto Lopez Fabian
Mauricio Rivera
julio.franco.sb
julio.franco.sb
Jesus Contreras
Mariano Alberto Martinez
Carlos Andrés Charris S
Alfonso Navarro
JAIME VARGAS
Juan C Felizzola
Alvaro Diaz
Juan Pablo Cano Buitrago
Juan Guillermo Perez Cardozo
Juan Guillermo Perez Cardozo
Claudia Ibarra
Jorge Luis Paiva Huamán
Alex Camacho
Jorge Luis Paiva Huamán
Jesus David Mendez Coronell
VICTOR JUAREZ PALAFOX
Rafael Eldanoy Ensuncho Bechara
Rafael Eldanoy Ensuncho Bechara
Platzi Team
Ricardo Portillo
VICTOR JUAREZ PALAFOX
Israel Antonio Morales Vargas
Tamara Nuñez Padilla
Wilson Gustavo Chango Sailema
Christiaan Guzman Dominguez
Carlos Uriel de Jesus Sánchez González
Jose Valderrama
Jose Valderrama
christian jordy mamani sucasaire
Para poder utilizar el this.navCtrl.push(LugarPage); es necesario tener importada la clase Lugar Page donde se quiera utilizar.
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
<ion-content padding> <ion-button expand=“full” routerLink="/newpag">newpage</ion-button> </ion-content>```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
espero sirva
Muchas gracias, me sirvió de ayuda tu explicaciones
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'); } }
Gente que le pone el alma !!
Para que se vea el botón de back hay que agregarlo en el lugar.page.html
Hay que tener en cuenta que ese IDE agrega el Import Automaticamente.
El Editor “Visual Studio Code” también lo hace de manera automática. Saludos!
Puedes navegar entre paginas de dos maneras:
app.module.ts y this.navCtrl.push(LugarPage);this.navCtrl.push('LugarPage'); sin importar nada en el app.module.ts ni en entryComponentsen la versión 4 de Ionic la navegación se mejora mucho usando el archivo app-routing.module.ts
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.
Totalmente, estoy empezando en IONIC y es complicado porque existen varios cambios significativos entre versiones :(
Usamos this.navCtrl porque lo estamos importando y nombrando directamente en el constructor
import { NavController } from 'ionic-angular'; constructor(public navCtrl: NavController) { }
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
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.
encontre 2 formas para hacerlo en ionic 4 :
(’./lugar’); en esta parte quitar punto, que pena se me fue.
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.
Para ionic5: <ion-button routerLink="/lugar" routerDirection="forward">Lugar</ion-button>
¡Hola Coco, Muchas gracias por el aporte. ¡Nunca pares de aprender! 💚
Que extension en visual code se puede usar para autocompletar los ion-footer por ej.
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
Eso es correcto
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.
Sinceramente tengo mucho que aprender
Es decir que no es obligatorio cargar las páginas en el entryComponent?
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
Gracias por la sugerencia, funcionó perfectamente
Ya se navega a Lugar pero no genera el boton regresar aunque ya agrege el código.
actualicen la versión!
home.page.html
<ion-header [translucent]="true"> <ion-toolbar> <ion-title> Blank </ion-title> </ion-toolbar> </ion-header> <ion-content [fullscreen]="true"> <ion-button color="primary" routerLink="/lugar">Lugar</ion-button> </ion-content> <ion-footer> <ion-toolbar> <ion-title color="primary">Curso Ionic</ion-title> </ion-toolbar> </ion-footer>
uff gracias
ionic generate page <Nombre> import { NavController }from'ionic-angular'; constructor(public navCtrl: NavController){ } this.navCtrl.push(<componente>);
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';
Alguien me ayuda…!!
tu tambien estas trabajandon con ionic 4 …creo q el tutorial lo hicieron con la v3…tengo el mismo problema 😦