Angular 2 Routen, die sich nicht wie erwartet verhalten

Question

Ich versuche, grundlegende Routen mit Parametern zu implementieren, indem ich die Heroes-Probe imitiert (https://angular.io/docs/ts/latest/guide/router.html). Mein AppModule erklärt einen Pfad:

const appRoutes: Routes = [ 
    { path: '',  component: AllStuffComponent }, 
    { path: 'stuff/:id', component: SingleStuffComponent }, 
]; 

Mein SingleStuffComponent sieht wie folgt aus, nur die Mechanik zu testen:

export class SingleGuiComponent implements OnInit { 

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

    ngOnInit() { 
    this.route.params 
     .switchMap((params: Params) => params['id']) 
     .subscribe((id: any) => console.info("ID=" + id)); 
    } 
} 

Ich habe versucht, eine URL im Browser http://localhost:3000/stuff/2345 tun. Aber im Debugger sehe ich:

ID=2 
ID=3 
ID=4 
ID=5 

Warum passiert das? Ich erwartete nur das einzelne Konsolenprotokoll von ID=2345.

Answer 1

Ich denke, Sie sollten versuchen und nur die map() -Funktion verwenden, um die ID zu extrahieren, und es wird funktionieren.

this.route.params 
     .map((params: Params) => params['id']) 
     .subscribe((id: any) => console.info("ID=" + id)); 

Sie werden hauptsächlich verwenden switchMap(), um die emittierten ID aus der Karte zu erhalten() und verwendet es für einen neuen API-Aufruf oder so ähnlich, so dass Sie nicht zu nisten 2 abonnieren Funktionen haben werden.

Beispiel:

this.route.params 
     .map((params: Params) => params['id']) 
     .switchMap(id => this._someService.getSomething(id)) 
     .subscribe((result: any) => { 
      console.log(result); 
     }); 

Ohne switchMap(), würden Sie tun müssen:

this.route.params 
    .map((params: Params) => params['id']) 
    .subscribe((id) => { 
    this._someService 
     .getSomething(id) 
     .subscribe(result => this.result = result); 
    });