# index.html
<body> <app-root></app-root> </body>
# app.component.html
<ion-app> <ion-router-outlet></ion-router-outlet> </ion-app>
# pages 생성
ionic g page pages/login ionic g page pages/dashboard ionic g page pages/details
# app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' }, { path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' }, { path: 'details/:myid', loadChildren: './pages/details/details.module#DetailsPageModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
- 각 page의 html 상에서 아래의 코드로 페이지 이동 가능
<ion-button expand="block" [routerLink]="['/details/', foo]" routerDirection="forward"> //routerDirection="root"
# detail page같은 경우, 아래의 코드로 id를 받아옴
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-details', templateUrl: './details.page.html', styleUrls: ['./details.page.scss'], }) export class DetailsPage implements OnInit { myId = null; constructor(private activatedRoute: ActivatedRoute) { } ngOnInit() { this.myId = this.activatedRoute.snapshot.paramMap.get('myid'); } }
'[DEV] App Dev ∕ Mobile > Framework ∕ Ionic' 카테고리의 다른 글
| ServiceWorker과 PWA(Progressive Web App) (0) | 2020.08.07 |
|---|---|
| Manifest.json과 PWA(Progressive Web App) (0) | 2020.08.06 |
| Bug Report (0) | 2020.08.06 |
| Ionic Sqlite 연동하기 (0) | 2020.08.04 |
| Ionic 기초 (0) | 2020.08.04 |
최근댓글