[Angular]MultipleModule 구성에서의 Routing

개요

절차

앱의 병아리 만들기

ng new ng-multiple-module-routing-sample --routing=true --skip-tests=true --no-interactive=

% tree src/app
src/app
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts

<router-outlet></router-outlet>

module 만들기

ng generate module --name=home --module=app --route=home --routing --no-interactive

% tree src/app
src/app
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts
└── home
    ├── home-routing.module.ts
    ├── home.component.css
    ├── home.component.html
    ├── home.component.ts
    └── home.module.ts

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

const routes: Routes = [
  {
    // /home/**へのアクセスはh./home/home.moduleへ飛ばされる
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
  },
];

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

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

import { HomeComponent } from './home.component';

// pathの部分は/homeの後ろの値のこと。つまり''は/homeに該当する
const routes: Routes = [{ path: '', component: HomeComponent }];

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

액세스하면 home worls!가 표시됩니다.

module에 라우팅 추가

ng generate component --name=home/about --module=home --skipTests --no-interactive

% tree src/app
src/app
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.ts
├── app.module.ts
└── home
    ├── about
    │   ├── about.component.css
    │   ├── about.component.html
    │   └── about.component.ts
    ├── home-routing.module.ts
    ├── home.component.css
    ├── home.component.html
    ├── home.component.ts
    └── home.module.ts

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

import { HomeComponent } from './home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  // /home/aboutにアクセスするとAboutComponentが表示される
  { path: 'about', component: AboutComponent },
];

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

홈 모듈의 라우팅이므로 /home/about에 액세스하면 About 구성 요소가 표시됩니다.

const routes: Routes = [
  { path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: AboutComponent },
];

감상