ionic 사이드바에 메뉴 바꾸기, 페이지 추가 후 라우팅하기

사이드바 메뉴 바꾸기

위 화면의 사이드바에 회원가입, 로그인, 로그아웃 메뉴를 삽입하려고 함.

 

수정후 화면

 

---

아래의 app.component.ts 페이지에서 수정해야 함.

export class AppComponent implements OnInit { 
  public selectedIndex = 0; 
  public appPages = [ 
    { 
      title: 'Inbox', 
      url: '/folder/Inbox', 
      icon: 'mail' 
    }, 
    { 
      title: 'Outbox', 
      url: '/folder/Outbox', 
      icon: 'paper-plane' 
    }, 
    { 
      title: 'Favorites', 
      url: '/folder/Favorites', 
      icon: 'heart' 
    }, 
    { 
      title: 'Sign Up', 
      url: '/folder/SignUp', 
      icon: 'person-add' 
    }, 
    { 
      title: 'Log In', 
      url: '/folder/LogIn', 
      icon: 'log-in' 
    }, 
    { 
      title: 'Log Out', 
      url: '/folder/LogOut', 
      icon: 'log-out' 
    } 
  ];

-title : 제목 설정

-icon : 아이오닉 홈페이지( https://ionicons.com/ )에서 해당되는 아이콘의 이름을 복붙.

---

페이지 추가 후 라우팅하기

-url : 페이지 추가후 적절한 주소를 설정해주면 된다.

 

 

• 페이지 추가하기 : cmd에서 해당 폴더에 들어가서 아래의 명령어를 입력한다. 맨마지막은 페이지의 이름 입력. 

C:\ionic\firstApp\src\app\folder>ionic g page signup

 

 

 

 

 

• 라우팅하기 : app-routing.module.ts( 앱에서 라우팅하는 첫번째 장소.) 페이지에서 라우팅을 한다.

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'folder/Inbox',
    pathMatch: 'full'
  },
  // {
  //   path: 'folder/:id',
  //   loadChildren: () => import('./folder/folder.module').then( m => m.FolderPageModule)
  // },
  {
    path: 'folder/signup',   
    loadChildren: () =>import('./folder/signup/signup.module').then(m => m.SignupPageModule)
  },  
  {
    path: 'folder/login',    
    loadChildren: () =>import('./folder/login/login.module').then(m => m.LoginPageModule)
  },  
  {
    path: 'folder/login',    
    loadChildren: () =>import('./folder/logout/logout.module').then(m => m.LogoutPageModule)
  },  

]

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

처음에는 주석처리 한 부분처럼 나오는데 페이지를 새로 만들면 path를 다시 설정해야 한다. 참고하는 path는 'folder-routing.module.ts' 에서 가져온다.

 

 

• app.component.ts 페이지 재수정 :  'app-routing.module.ts'의 path와 똑같이 'app.component.ts'의 url 부분이 일치해야 해당 페이지로 연결이 되기 때문이다.

export class AppComponent implements OnInit {
  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Inbox',
      url: '/folder/Inbox',
      icon: 'mail'
    },
    {
      title: 'Outbox',
      url: '/folder/Outbox',
      icon: 'paper-plane'
    },
    {
      title: 'Favorites',
      url: '/folder/Favorites',
      icon: 'heart'
    },
    {
      title: 'Sign Up',
      url: '/folder/signup',
      icon: 'person-add'
    },
    {
      title: 'Log In',
      url: '/folder/login',
      icon: 'log-in'
    },
    {
      title: 'Log Out',
      url: '/folder/logout',
      icon: 'log-out'
    }
  ];

 

제대로 적용된 화면