2016-11-12 2 views
4

Mein Formular muss auf Routenparameter und Daten zugreifen. Sie sind Observable, also muss ich mich anmelden, um auf ihre Werte zugreifen zu können. Meine Frage ist, wie erreiche ich beide zusammen in einem einzigen Abonnement?Abonnieren von Routenparametern und Daten in Angular 2

this._route.params.subscribe(
    params => { 
    getData(params['id'], data['id2'] <=== i need data value too. how do i get this???) 
    }); 

Warum setzt eckig sie in 2 separate Observables?

Antwort

7

Wie erreiche ich beide zusammen in einem einzigen Abonnement?

Sie könnten ActivatedRouteSnapshot von Ihrem ActivatedRoute verwenden. ActivatedRouteSnapshot Schnittstelle hat params und queryParams Eigenschaft, und Sie können beide Werte gleichzeitig erhalten. Hinweis: wir nur mit dieser Technik

constructor(private _route: ActivatedRoute) { 
    console.log(this._route.snapshot.params); 
    console.log(this._route.snapshot.data); 
} 

Beispiel Plunker

Eine weitere Möglichkeit, den Anfangswert der Parameter erhalten, da params und data sind observable, wir zip Betreiber sie fusionieren nutzen könnten, dann greifen sie in ein einzelnes Abonnement. Aber bedenken Sie, dass, wenn einer von params oder data keinen Wert hat, das Abonnement nicht ausgelöst wird.

this._route.params 
    .zip(this._route.data) 
    .subscribe((value) => { 
    this.id = value[0]["id"]; // get param 
    this.data = value[1]; // get data value 
    }); 

Beispiel Plunker

Warum Winkel hat sie in zwei getrennten Observablen setzen?

Ich habe die Dokumentation gelesen, und Sie sind richtig, gibt es in separaten Observablen, aber ich weiß nicht warum.

+1

nach angular docs, tun sie. this._route.params.subscribe und this._route.data.subscribe – Reynaldi

+0

@Reynaldi yeah Sie hatten Recht. Ich habe mich geirrt. Tut mir leid, ich sollte die Dokumentation öfter lesen. – Michael

+0

@Reynaldi Ich habe meine Antwort bearbeitet. Gib mir Bescheid. – Michael

0

Ähnlich wie Michaels Antwort können Sie eine ActivatedRouteSnapshot von Ihrem ActivatedRoute verwenden, um die Route data zu erhalten.

Sie können dies in ein params Abonnement setzen und es wird ausgelöst, auch wenn die Route keine params enthält.

this.route.params.subscribe((params) => { 
    console.log(params); 
    console.log(this.route.snapshot.data); 
}); 
Verwandte Themen