app.module.ts
import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {HttpModule} from '@angular/http'; import {AppComponent} from './app.component'; import {HomeComponent} from './home/home.component'; import {UsersComponent} from './users/users.component'; import {ServersComponent} from './servers/servers.component'; import {UserComponent} from './users/user/user.component'; import {EditServerComponent} from './servers/edit-server/edit-server.component'; import {ServerComponent} from './servers/server/server.component'; import {ServersService} from './servers/servers.service'; import {RouterModule, Routes} from '@angular/router'; const appRoutes: Routes = [ {path: '', component: HomeComponent}, {path: 'users', component: UsersComponent}, {path: 'users/:id/:name', component: UserComponent}, {path: 'servers', component: ServersComponent}, ]; @NgModule({ declarations: [ AppComponent, HomeComponent, UsersComponent, ServersComponent, UserComponent, EditServerComponent, ServerComponent ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ], providers: [ServersService], bootstrap: [AppComponent] }) export class AppModule { }
user.component.html
<p>User with ID {{user.id}} loaded.</p> <p>User name is {{user.name}}</p> <a [routerLink]="['/users',10,'Anna']">Load Anna (10)</a>
user.component.ts
import {Component, OnDestroy, OnInit} from '@angular/core'; import {ReactiveErrors} from '@angular/forms/src/directives/reactive_errors'; import {ActivatedRoute, Params} from '@angular/router'; import {Subscription} from 'rxjs'; @Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.css'] }) export class UserComponent implements OnInit, OnDestroy { user: { id: number, name: string }; private paramsSubscription: Subscription; constructor(private route: ActivatedRoute) { } ngOnInit() { // use to initialize user this.user = { // it is always string, so convert it if needed using Number() id: this.route.snapshot.params['id'], name: this.route.snapshot.params['name'] }; // use this to react to changes this.paramsSubscription = this.route.params.subscribe( (params: Params) => { this.user.id = params['id']; this.user.name = params['name']; } ); } ngOnDestroy(): void { this.paramsSubscription.unsubscribe(); } }