Angular 라우팅과 네비게이션

// 라우트 설정 예
const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'foo', component: FooComponent },
]

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { userHash: true }),
  ]
})

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'service', component: ServiceComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent },
]

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...
];

// app.module.ts
...
import { Routes, RouterModule } from '@angular/router';
import { SomeComponent, ... } from 'path'; // 컴포넌트 임포트

// 라우트 구성
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  ...
];

@NgModule({
  declarations: [
    SomeComponent, // 컴포넌트들 등록
    ...
  ],
  imports: [
    RouterModule.forRoot(routes) // 라우터 모듈 생성 후 등록
  ]
})

// app-routing.module.ts
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'

import { SomeComponents } from 'path' // 컴포넌트 임포트

// 라우트 구성
const routes: Routes = [
  { path: '', redirectTo: 'foo', pathMatch: 'full' },
  { path: 'bar', component: FooComponent },
  { path: 'baz', component: BarComponent },
]

@NgModule({
  // 모든 라우트 구성을 포함한 모듈을 생성하고 라우팅 모듈에 추가
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

// app.module.ts
...
import { AppRoutingModule } from './app-routing.module'; // 라우팅모듈 임포트
import { SomeComponents } from 'path'; // 컴포넌트 임포트

@NgModule({
  declarations: [
    SomeComponents // 컴포넌트 정의
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, // 라우팅 모듈 등록
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<router-outlet></router-outlet>

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/service">Service</a>
  <!-- <a href="/foo">Nope</a> -->
</nav>

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/service">Service</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

<a routerLink="/service" routerLinkActive="active">Service</a>

<a routerLink="/service"
   [routerLinkActiveOptions]="{ exact: true }"
   routerLinkActive="active">Service</a>

<a routerLink="/service" routerLinkActive="class1 class2">Service</a>
<a routerLink="/service" routerLinkActive="['class1', 'class2']">Service</a>

// mycomponent.component.ts
export class MyComponent {
  constructor(
    private router: Router // 의존성 주입
  ) {}
  goto() {
    this.router.navigate(['path']) // 경로 지정
  }
}

<a routerLink="/todo">...</a>

<a routerLink="/todo/:id">...</a>

const routes: Routes = [
  { path: '', component: TodosComponent },
  { path: 'todo/:id', component: TodoDetailComponent }, // id 가 파리미터
]

<a [routerLink]="['/todo', todoId]">...</a>
<!-- 아래와 같이 구성됩니다. -->
<a routerLink="/todo/10">...</a>

this.router.navigate(['/todo', todoId])

export declare class ActivatedRoute {
  /*  */
  url: Observable<UrlSegment[]>
  /*  */
  params: Observable<Params>
  /* 라우팅 규칙에 정의된 라우팅 변수를 map 타입의 Observable로 표현합니다. 맵을 사용하면 라우팅 규칙에 포함된 라우팅 인자를 한 번에 모두 가져올 수도 있습니다. */
  queryParams: Observable<Params>
  fragment: Observable<string>
  data: Observable<Data>
  outlet: string
  component: Type<any> | string | null
  snapshot: ActivatedRouteSnapshot
  /** The configuration used to match this route */
  readonly routeConfig: Route | null
  /** The root of the router state */
  readonly root: ActivatedRoute
  /** The parent of this route in the router state tree */
  readonly parent: ActivatedRoute | null
  /** The first child of this route in the router state tree */
  readonly firstChild: ActivatedRoute | null
  /** The children of this route in the router state tree */
  readonly children: ActivatedRoute[]
  /** The path from the root of the router state tree to this route */
  readonly pathFromRoot: ActivatedRoute[]
  readonly paramMap: Observable<ParamMap>
  readonly queryParamMap: Observable<ParamMap>
  toString(): string
}

...
import { ActivatedRoute } from '@angluar/router';

...
export class MyComponent {
  constructor(
    private route: ActivatedRoute, // 의존성 주입
  ){ }
  ...
}

...
export class MyComponent implements OnInit {
  constructor(
    private route: ActivatedRoute, // 의존성 주입
  ) { }
  ngOnInit() {
    this.route.paramMap
      .subscribe((params) => this.id = +params.get('id')) // params.get('key') 을 통해 취득
  }
}

ngOnInit() {
  ...
  this.id = +this.route.snapshot.paramMap.get('id'); // 스냅샷으로 획득
}

const routes: Routes = [
  {
    path: 'foo',
    component: FooComponent,
    data: {
      // 데이터 설정
      title: 'Foo',
      sidebar: true,
    },
  },
]

...
// 라우트 파라미터 취득
this.id = +this.route.snapshot.paramMap.get('id');

// 라우트 정적 데이터 취득
this.data = this.route.snapshot.data;

AppComponent <router-outlet>
 ├─ FooComponent <router-outlet>
 │   ├─ FooChild1Component
 │   ├─ FooChild2Component
 │   └─ ...
 │
 └─ BarComponent <router-outlet>
     ├─ BarChild1Component
     ├─ BarChild2Component
     └─ ...

const routes: Routes = [
  {
    path: '',
    redirectTo: '/foo',
     pathMatch: 'full'
  },
  {
    path: 'foo',
    component: FooComponent,
    children: [ // 자식 라우트 구성
      { path: ':id', component: FooChild1Component, },
      { ... },
    ],
  },
  { ... },
]

// child-routing.module.ts
const routes: Routes = [...] // 자식 라우트 구성
@NgModule({
  ...
  imports: [ RouterModule.forChild(routes) ], // forChild 메서드 사용
})

// child.module.ts
import { ChildRoutingModule } from 'path';
...
@NgModule({
  declarations: [ Components... ],
  imports: [ ChildRoutingModule ] // 라우팅 모듈 등록
})
export class ChildModule { }

// app-routing.module.ts
const routes: Routes = [...] // 루트 라우트 구성
@NgModule({
  ...
  imports: [ RouterModule.forRoot(routes) ], // forRoot 메서드 사용
})

// app.module.ts
import { ChildRoutingModule } from 'path';
import { AppRoutingModule } from 'path';
...

@NgModule({
  ...
  imports: [
    AppRoutingModule,
    ChildRoutingModule,
    ...
  ]
  ...
})
...

// auth.guard.ts
...
@Injectable()
export class AuthGuard implements CanActivate { // CanActivate 인터페이스
  constructor(
    private route: Router,
    private auth: AuthService,
  ){ }

  CanActivate() {
    if (!this.auth.isAuthenticated) {
      // 유효하지 않을 경우
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

// 라우트 구성
...
{
  path: 'user',
  component: UserComponent,
  canActivate: [ AuthGuard ] // 접근제한
}

// auth.guard.ts
...
@Injectable()
export class AuthChildGuard implements CanActivateChild {
  CanActivateChild () {
    ...
  }
}

// 라우트 구성
...
{
  path: 'user',
  component: UserComponent,
  canActivateChild: [ AuthChildGuard ], // 접근제한
  children: [ ... ]
}

// foo-guard.service.ts
...
@Injectable()
export class FooGuardService implements CanLoad {
  canLoad() {
    // ...
  }
}

// 라우트 구성
...
{
  path: 'foo',
  loadChildren: 'path/#FooModule', // 지연로딩 라우팅 규칙 설정
  canLoad: [ FooGuardService ] // canLoad 프로퍼티 등록
}

// foo-guard.service.ts
...
@Injectable()
export class FooGuardService implements Resolve {
  resolve() {
    // ...
    return someData; // 데이터 반환
  }
}

interface CanDeactivate<T> {
  canDeactivate(component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree