Angular - Router

routerLink & routerLinkActiveOptions 스타일링

      <ul class="nav nav-tabs">
        <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact : true}" ><a routerLink="/">Home</a></li>
        <li role="presentation" routerLinkActive="active"><a routerLink="servers">Servers</a></li>
        <li role="presentation" routerLinkActive="active"><a [routerLink]="['users']">Users</a></li>
      </ul>

servers로 작성한거는 상대경로이다.

routerLinkActive

routerLinkActive를 사용하면 매치된 URL에 클래스를 부과하여 스타일을 적용시킬 수 있다.
routerLinkActive="active"

단, 현재경로("/")에서는 스타일이 지속되기 때문에 [routerLinkActiveOptions]="{exact : true}"를 지정해준다.

navigate

<button class="btn btn-primary" (click)="onLoadServers()">Load Servers</button>

  onLoadServers(){
    this.router.navigate(['/servers'])
  }

루트 매개변수 가져오기

user.component.ts

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user: {id: number, name: string};

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit() {
    this.user = {
      id : this.route.snapshot.params['id'],
      name : this.route.snapshot.params['name']
    }
  }

}

app.module.ts

const appRoutes : Routes = [
  { path : '', component : HomeComponent },
  { path : 'users', component: UsersComponent },
  { path : 'users/:id/:name', component:UserComponent },
  { path : 'servers', component: ServersComponent }
]