javascript - this.route.snapshot.params.id.switchMap is not a function Error in Angular2 -

i using angular2 build poc.

here route looks :

routermodule.forroot([ {   path:'',   redirectto:'app',   pathmatch:'full', }, {   path:'contact-list',   component:contactslistcomponent }, {   path:'contact-details/:id',   component:contactcardcomponent }]) 

in contactslistcomponent looping through data getting service.

    <li *ngfor = "let contact of contacts ;trackby : trackbyid;let = index;let c = count;let e = even; let o = odd;"       [ngclass] = "{         odd : o,         even: e       }">       index : {{i}}       count : {{c}}       <a [routerlink] = "['/contact-details',contact.id]">         {{contact.name}}       </a>     </li>   </ul> 

and now, in contactcardcomponent :

import { component,input,output,eventemitter,oninit } '@angular/core'; import { contact } './contact'; import { activatedroute } '@angular/router'; import { contactservice } './contact-service'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/switchmap';  @component({     selector:'contact-card',     template:`         <div class="contact-card">             <p>{{ selectedcontact.name }} ( {{ selectedcontact.age }} )</p>             <p>{{ selectedcontact.email }}</p>         </div>         <button (click) = "sendnotification()">notify parent!</button>                 `,     providers:[contactservice] })  export class contactcardcomponent implements oninit{     id : string;     selectedcontact : contact;      @output() notifyparentcomponent : eventemitter<any> = new eventemitter();      constructor(private route : activatedroute,private _contactservice : contactservice){     }       ngoninit(){         this.selectedcontact = this.route.snapshot.params['id']             .switchmap(id => this._contactservice.getcontact(id))             .subscribe(contact => this.selectedcontact = contact);     }     sendnotification(){         this.notifyparentcomponent.emit('emitted value parent');     } } 

it says error_handler.js:54 exception: uncaught (in promise): error: error in :0:0 caused by: this.route.snapshot.params.id.switchmap not function error: error in :0:0 caused by: this.route.snapshot.params.id.switchmap not function.

what doing wrong? can please explain logic also?

edit

the service looks :

import {injectable} '@angular/core'; import { contact } './contact'; import { contacts } './mock-contacts';  @injectable() export class contactservice{     getcontacts() : contact[]{         return contacts;     }       getcontact(id : number) : promise<contact>{         return this.getcontactsslowly().             then(contacts => contacts.find(contact => contact.id == id));     }      getcontactsslowly() : promise<contact[]> {         return new promise(resolve => {             settimeout(() => resolve(this.getcontacts()),1000);         });     } } 

route.snapshot -as name suggests- snapshot of route, there no observable property on it.

so can : (note need import 'rxjs/add/operator/pluck' in ts file)

this.route.params.pluck('id')             .switchmap((id: number) => observable.frompromise(this._contactservice.getcontact(id)))             .subscribe(contact => this.selectedcontact = contact); 

or :

this._contactservice.getcontact(+this.route.snapshot.params['id'])             .then(contact => this.selectedcontact = contact);