1. Import Module
import { RouterModule } from '@angular/router';
@NgModule({
imports: [ RouterModule.forRoot(appRoutes) ]
})
2. Define Routes
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
];
1. Import router to component
public goToSecretPage() {
this.router.navigate(['/secret']);
}
import { Router } from '@angular/router';
@Component({ ... })
export class MyComponent {
constructor(private router: Router) {}
}
2. Navigation
( inside Component )
1. routerLink directive
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/secret" routerLinkActive="active">Secret</a>
</nav>
( inside Template )
2. router-outlet directive
<main>
<router-outlet></router-outlet>
</main>
(don't forget)
<base href="/">