목록Router (7)

깜놀하는 해므찌로

Ion-Content Ionic layout 구조 설명 / router 구조

1. 일반적으로 레이아웃 안에 페이지가 들어가기 때문에 app < layout < login 으로 포함되도록 설계합니다. 2. 라우터의 경우 path : '' 비어있는 상태라면 layout 으로 가도록 설정합니다. 3. layout 에 자식 프로퍼티를 넣어 deps 를 설정합니다. 4. ion-content: absolute 를 걸어 모든 스크롤을 가져옵니다. 매우 중요!
IT 2023. 8. 1. 15:20
Angular router params 데이터 받기 예시

ngOnInit() { const item = this.orderService .getItems() .find((_item) => _item.id === +this.activateRoute.snapshot.params['id']); if (item) { this.order = item; this.setPage(); } } 1. + 사용 시 문자열 -> 넘버타입으로 쉽게 변경 가능
IT 2023. 6. 23. 15:07
Angular parameter prams router data pass example 두가지 방법

[queryParams]="{'sequence': item.sequence}" this.activateRoute.queryParams.subscribe((params) => console.log(params['sequence']) ); // 첫 번째 방식 const a = this.activateRoute.snapshot.queryParamMap.get('sequence'); console.log(a); // 두 번째 방식
IT 2023. 6. 21. 19:50
Angular router config 활용 예시

import { Component, Input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Router, Route } from '@angular/router'; import { IconComponent } from '../icon/icon.component'; import { ClickOutsideDirective } from '@team-lepisode/directives'; @Component({ selector: 'client-menu-dropdown', standalone: true, imports: [CommonModule, IconComponent, ClickOutsideDirective], ..
IT 2023. 6. 14. 15:30
Angular route config 가져와서 사용하기 예시

import { Route } from '@angular/router'; import { LayoutPage } from './pages/layout/layout.page'; export const appRoutes: Route[] = [ { path: '', title: '테스트', component: LayoutPage, children: [ { path: '', title: '테스트 - 홈', data: { menu: false }, loadComponent: () => import('./pages/index/index.page').then((m) => m.IndexPage), }, { path: 'video', title: '테스트 - 영상', data: { menu: true, // true =..
IT 2023. 5. 22. 13:41
Angular route 메뉴 셋팅 예시

import { Route } from '@angular/router'; import { LayoutPage } from './pages/layout/layout.page'; export const appRoutes: Route[] = [ { path: '', title: '', component: LayoutPage, children: [ { path: '', title: ' - 홈', data: { menu: false }, loadComponent: () => import('./pages/index/index.page').then((m) => m.IndexPage), }, { path: 'video', title: ' - 영상', data: { menu: true, label: '영상', icon:..
IT 2023. 5. 18. 13:19
Angular router parameter get 방식 전송 예시

[routerLink]="['./', admin.id]" 1. 요청할 페이지 템플릿 import { RouterModule } from '@angular/router'; 2. 요청할 페이지 컴포넌트 { path: '', children: [ { path: 'admin', children: [ { path: '', component: AdminPage }, { path: ':id', component: AdminDetailPage }, ], }, ], }, 3. 라우터 설정 : id라는 변수로 보낼 것을 명시, : 변수명 앞에 콜론 반드시 명시 import { ActivatedRoute } from '@angular/router'; constructor( private activateRoute: Activ..
IT 2023. 5. 1. 19:28
이전 Prev 1 Next 다음