Routing

다른 모듈을 import 하여 사용하는 경우

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'auth',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  }
]
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

components 를 직접 호출하는 경우, 이 경우는 components가 module 에서 declear 되어야 한다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';

const routes: Routes = [
  { path: '', component: HomePage},
  { path: 'home', component: HomePage}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyPageRoutingModule {}

위의 경우는 둘다 모듈에서 별도의 routing.module.ts를 분리한 경우이다. 이럴경우는 모듈에서 import 과정을 거쳐야 한다.

import { RoutingModule } from './routing.module';
@NgModule({
  imports: [
    RoutingModule,

  ],

module에서 바로 처리하는 방법

import { RouterModule } from '@angular/router';
import { NoticePage } from './notice.page';
import { NoticeViewPage } from './notice.view.page';
@NgModule({
  imports: [
    RouterModule.forChild([
      { path: '', component: NoticePage},
      { path: 'view/:id', component: NoticeViewPage},
    ]),
    MatIconModule
  ],

parameter 받기

아래와 같이 ':id' 값 받기

{ path: 'view/:id', component: NoticeViewPage},

import { ActivatedRoute } from '@angular/router';

@Component({
})
export class NoticeViewPage {

  public article: any;

  constructor(
    private activatedRoute: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      console.log(params.id);
    });
  }
}

CanActivateGuard

CanActivateGuard 는 특정 url로 접근시 권한 여부를 부여한다.
예로 회원(auth 권한이 있는) 만이 접근해야 하거나 특정권한을 가진 user만이 접근해야 할 경우 사용가능하다.

v16이후

CanActivate 대신 mapToCanActivate 을 이용하여 다양한 CanActivate을 적용할 수 있다. v16을 기준으로 CanActivate, CanActivateChild등이 deprecated 되었습니다.

1. 아래와 같이 auth-guard.service를 만들어 준다.

• auth-guard.service.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';

@Injectable()
export class AuthGuardService {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}

  canActivate(): boolean {
    if (권한이 없으면) {
      this.router.navigate(['/auth/account']);
      return false;
    }
    return true;
  }
}

AuthGuardService 를 providers에 정의한다.

module.ts

import { AuthGuardService } from './auth-guard.service';
@NgModule({
    providers: [AuthGuardService]
})

3. routes 에 AuthGuardService 적용

app.routes.ts

import { RouterModule, Routes, mapToCanActivate } from '@angular/router';
import { AuthGuardService } from './auth-guard.service';
export const appRoutes: Routes = [
    ......................
  { path: 'product', component: ProductComponent, mapToCanActivate : [AuthGuardService] },

];

v16 이전

1. 아래와 같이 auth-guard.service를 만들어 준다.

• auth-guard.service.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(
    private router: Router
  ) {}

  canActivate(): boolean {
    if (권한이 없으면) {
      this.router.navigate(['/auth/account']);
      return false;
    }
    return true;
  }
}

AuthGuardService 를 providers에 정의한다.

module.ts

import { AuthGuardService } from './auth-guard.service';
@NgModule({
    providers: [AuthGuardService]
})

3. routes 에 AuthGuardService 적용

app.routes.ts

import { RouterModule, Routes, canActivate } from '@angular/router';
import { AuthGuardService } from './auth-guard.service';
export const appRoutes: Routes = [
    ......................
  { path: 'product', component: ProductComponent, canActivate : [AuthGuardService] },

];

routerLink routerLinkActive

module.ts

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

component.ts

<a routerLink="/link/page" routerLinkActive="active" >
</a>

component.ts

import { Router } from '@angular/router';
..................
constructor(
    private router: Router,
) {
    this.router.navigate(['/some-route']);
}

history에 포함하지 않고 이동. back할 때 이동하지 않음.

this.router.navigate(['/some-route'], { skipLocationChange: true });

url을 현재 주소로 교체할 것인지 여부.

this.router.navigate(['/some-route'], { replaceUrl: true });