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 = {
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();
}
}