다이나믹 라우팅 실행

1. Routing 1에서 이어짐
2. app.component.html에서 routerLink 추가

<h1>Code Step By Step</h1>

<a routerLink="">Home</a>
<br>

<a routerLink="about">About</a>
<br>

<a routerLink="user">User</a>
<br>
<br>

<a routerLink="user/10">Isaac</a>
<br>
<a routerLink="user/20">Lim</a>
<br>
<a routerLink="user/30">Kim</a>
<br>

<router-outlet></router-outlet>

1. app-routing.module.ts에서 라우터 수정

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  {
    component: HomeComponent, 
    path:''
  },
  {
    component: AboutComponent, 
    path:'about'
  },  {
    component: UserComponent, 
    path:'user/:id'
  }
];

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

1. user.component.ts에서 ActivatedRoute 생성자를 추가하고 실행시 콘솔로 확인할 정보 입력

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  constructor(private route:ActivatedRoute) { }

  ngOnInit(): void {
    console.warn("user id is", this.route.snapshot.paramMap.get('id'))
  }

}

1. 확인을 하였으면 id값을 받을 userId 변수를 선언하고 값을 받는다

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  userId:string | null = null;
  
  constructor(private route:ActivatedRoute) { }

  ngOnInit(): void {
    console.warn("user id is", this.route.snapshot.paramMap.get('id'));
    this.userId = this.route.snapshot.paramMap.get('id');
  }

}

1. user.component.html에서 userid 출력

<p>user works!</p>

<h1>This is User id {{userId}}</h1>