자식 페이지 라우팅하기

1. 자식 컴포넌트 생성

ng g c about-company
ng g c about-me

1. 가장 상위 about 컴포넌트 html 파일 수정

<h1>About Everything</h1>
<a routerLink="company">K4-Sercurity Company</a>
<br>
<a routerLink="me">Lim Isaac</a>
<router-outlet></router-outlet>

1. app-routing.module.ts 에서 자식 라우터 생성

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutCompanyComponent } from './about-company/about-company.component';
import { AboutMeComponent } from './about-me/about-me.component';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { NoPageComponent } from './no-page/no-page.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  {
    component: HomeComponent, 
    path:''
  },
  {
    component: AboutComponent, 
    path:'about',
    children:[
      {path:'company', component: AboutCompanyComponent},
      {path:'me', component: AboutMeComponent}
    ]
  },  
  {
    component: UserComponent, 
    path:'user/:id'
  },
  {
    component: NoPageComponent, 
    path:'**'
  }
];

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

1. 결과