Angular 2 Routing - Routing-Parameter erhalten - Typoskript

Question

NVM 0.31.0: npm 3.10.3: Node.js 6.6.0

Von login.component.ts

gotoProfile(id:number):void { 
    let link = ['/profile']; 
    console.log("Routing to /profile/"+id); 
    this.router.navigate(link, id); 
} 

Console:

Routing to /profile/1 

Von profile.component.ts

import { Router, ActivatedRoute, Params } from '@angular/router'; 

constructor(private route:ActivatedRoute, 
       private router:Router, 
       private profileService:ProfileService) { 
    } 

ngOnInit():void { 
this.route.params 
     .subscribe(params => { 
      let id = params['id']; 
      console.log("id " + id); 
      this.profileService.getProfileById(id) 
      .subscribe(
       p => this.model = p, 
       err => this.handleError(err), 
       () => console.log("getting profile complete") 
      ); 
    }); 

Von C onsole:

id undefined 

Von app.routing.ts

path: 'profile/:id', 
component: ProfileComponent 

Wenn ich diese dann geben Sie im Browser: http://localhost:3000/profile/1 Console:

id 1 

Also, was soll ich hier fehlt :)

Answer 1

Die Methode subscribe() sucht nach Änderungen in der URL, aber in yo In Ihrer Login-Komponente navigieren Sie direkt mit dem Router.

Von der zeigt das folgende Code-Snippet, wie die Parameter zu parsen, wenn auf diese Weise.

ngOnInit() { 
    this.route.params.forEach((params: Params) => { 
    let id = +params['id']; // (+) converts string 'id' to a number 
    this.service.getHero(id).then(hero => this.hero = hero); 
}); 
} 

jedoch Eingabe der URL löst direkt die subscribe() Methode, da sie die URL direkt beobachtet und erklärt, warum es funktioniert auf diese Weise tun, und Sie es in dem Konsolenprotokoll zu sehen.