Erste url id mit params und ActivatedRoute Winkel-2

Ich versuche zu bekommen eine uuid aus der URL (die aussieht wie https://something.com/card?id=wo uuid geht) und verwenden Sie dann die uuid zu bekommen, eine http-get-Anfrage.

Jetzt habe ich meine app.Komponente.ts sieht so aus:

private cardUuid: string;

constructor(private service: AppService,
            private route: ActivatedRoute){
            let sub = this.route.params.subscribe((params: Params) => {
                  this.cardUuid = params['id'];
                  console.log(this.cardUuid)
                })

}


ngOnInit(){
  this.service.browserUuid = 'http://address/cards?uuid=' + this.sub.cardUuid;
    console.log(this.sub.cardUuid)

}

Meine Konsole die logs wieder als undefiniert. Ich Frage mich, warum das der Fall ist? Ist die Methode für das abrufen der uuid falsch oder ist der Aufruf timing falsch?

Jede Hilfe/Tipps/Anregungen würde sehr geschätzt.

Update:
nach einem Vorschlag von @Alexander Staroselsky, ich umstrukturiert meiner Methode der Aufruf der uuid aus der url pro Winkel.io-docs.

app.Komponente.ts:

card: Card = {};

ngOnInit() {
 this.route.paramMap
  .switchMap((params: ParamMap) =>
    this.service.fetchCardUuid(+params.get('id')))
  .subscribe(
    card => {
      this.card = card;
      this.getVenueUuid(this.card);
    });
}

app-service.ts:

public UuidUrl = 'http://websiteaddress/cards?uuid='

constructor(private http: Http){}


private extractData(res:Response) {
  let body = res.json();
  return body || [];
}

fetchCardUuid(id: number) {
  return this.http.get(this.UuidUrl + id)
    .map(this.extractData)
}

Jedoch bin ich immer noch nicht die app zu laden, die richtige Verwendung der Uuid wird von der folgenden Url abgerufen. In der Konsole Netzwerk zeigt eine get-Anforderung-Karte?uuid=0. Wieder, jede Hilfe wäre sehr geschätzt werden.

Das url-Muster http://address/cards?uuid= ist mit queryParams, nicht params. Sie benötigen this.route.queryParamMap statt this.route.paramMap. paramMap werden keine Werte auf, wie die url aufgebaut wird.
Das funktionierte! Ich bin mir sicher, Sie sind sich bewusst, jetzt, mein Verständnis von queryParam versus param fehlt, um das Mindeste zu sagen. Wir entschuldigen uns für, die. Aber das ziehen die id aus der URL jetzt. DANKE!!!
Bitte posten Sie die Lösungen als Antworten, die nicht als updates für die Frage. Dies ist um Verwirrung zu vermeiden. Danke.
Dieses answer eine gute Beschreibung params vs queryParams im Kontext der Allgemeinen RESTful-API-Anwendungen. Meine ursprüngliche Antwort hatte queryParams verwiesen. Froh zu hören, es hat geklappt! Bitte markieren Sie die Antwort, die Ihnen helfen, die Lösung.

InformationsquelleAutor Brian Stanley | 2017-07-10

angular

5

Das format für die URL, die Sie zur Verfügung gestellt wird utilitizing query params (queryParams) anstatt die route params.

Update:

params würde verwendet werden, um eine route parameter wie id in der folgenden routing-Konfiguration (die :id im 'hero/:id'):

queryParams würde verwendet werden, um query-Parameter aus einem url-Muster wie Ihre https://something.com/card?id=. Die Kennung wäre id der Teil nach ? und vor der =.

{ path: 'hero/:id', component: HeroDetailComponent }

Erhalten Sie die Abfrage-Parameter in ähnlicher Weise wie this.route.params.subscribe() mit this.route.queryParams.subscribe() wie diese:
```
constructor(
    private service: AppService, 
    private route: ActivatedRoute) {}

ngOnInit() {
    let sub = 
        this.route.queryParams
          .subscribe((queryParams: Params) => {
            this.cardUuid = queryParams['id'];
            console.log(this.cardUuid);

            this.service.browserUuid = 'http://address/cards?uuid=' + this.cardUuid;
          });


}
```
UPDATE:

Abhängig von der version der Winkel - (4+), die Sie verwenden, müssen Sie die access-query params über eine beobachtbare auf ActivatedRoute genannt queryParamMap:

queryParamMap

Eine Beobachtbare enthält eine Karte der Abfrage
Parameter-verfügbar auf allen Strecken. Die Karte unterstützt das abrufen von einzelnen
und mehrere Werte aus der Abfrage-parameter.
```
this.route.queryParamMap
    .subscribe((queryParams: QueryParamMap)) => {
        this.cardUuidt = queryParams.get('id');
        console.log(this.cardUuidt);

        this.service.browserUuid = 'http://address/cards?uuid=' + this.cardUuid;
});
```
Update:

Ein mögliches Problem, die verursachen könnten Probleme ist this.sub.cardUuid im ngOnInit(). Definieren Sie eine variable sub Vertreter der Beobachten lokalen scope des Konstruktors. Es würde nicht zugänglich sein, in ngOnInit(). Wenn this.sub versucht, beziehen sich auf die sub im Konstruktor, das Abonnement würde keine route params, wie cardUuid direkt zur Verfügung. this.sub zurückkommen würde, nicht definiert und this.sub.cardUuid würde auch im Gegenzug kommen wieder undefiniert. Auch, Sie können nicht damit rechnen, ngOnInit ausgeführt nach subscribe() ausgeführt hat, damit das behoben cardUuid von params kann einfach nicht verfügbar sind.

Hier ist ein plunker der offiziellen Winkel-router-live-Beispiel. Wenn Sie auf Datei suchen app/Helden-detail.Komponente.ts und Lesen Sie die Anmerkungen und die Konsole Aussagen, wenn Sie in eine Helden-detail-Komponente/Ansicht, du wirst undefiniert Fehler vom versuchen, sich this.sub und this.sub.uuid.

Hoffentlich das hilft!
- Das hilfreich ist. Du hast mich in die richtige Richtung. Ich bin noch immer eine Undefinierte ihn zuerst wird die Funktion ausgeführt, aber dann kommt es wieder mit dem Wert der zweiten Zeit. Fortschritte!
- Können Sie bitte klarstellen, "das zweite mal"? Könnte man auch klären, was this.sub bezieht? Siehe meine aktualisierte Antwort.
- Entschuldigung für die Verzögerung. Wenn man sich die Konsole beim laden der Seite der Konsole.anmelden(das.cardUuid) den Wert undefiniert zurückgibt, und dann wieder mit der richtigen Uuid nach ein paar Augenblicke später. Ich gehe davon aus, dass weil Sie sich in ngOnInit (), dass es läuft zweimal?
- ngOnInit() und contructor() nur einmal ausgeführt, wenn die Komponente instanziiert wird, in diesem Fall, wenn ein held ausgewählt ist aus der Hauptansicht der Beispielanwendung. ngOnInit() und contructor() sind effektiv das gleiche tun, hier ist nur das abrufen von Werten in unterschiedlicher Weise.
- Dank brauchte ich this.route.paramMap. Ihre Plunker Beispiel funktioniert großartig für mich.
InformationsquelleAutor Alexander Staroselsky
4

Mit der Hilfe von @AlexanderStaroselsky und @Winkel-docs eine Lösung gefunden wurde.

Mein letzten ngOnInt() im app.Komponente.ts sieht wie folgt aus:
```
ngOnInit() {
 this.route.queryParamMap
  .switchMap((params: Params) =>
    this.service.fetchCardUuid(params.get('id')))
  .subscribe(
    card => {
      this.card = card;
      this.getVenueUuid(this.card);
    });
}
```
Diese Lösung effektiv wird die id aus der Url und sendet diese id in einem meiner service, um einen get-request. Wieder, cred geht an @AlexanderStaroselsky für die Lösung.

InformationsquelleAutor Brian Stanley

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.