web-dev-qa-db-de.com

Angular 2 Prüfen Sie, ob der URL-Parameter Abfrageparameter enthält

Ich muss überprüfen, ob die aktuelle URL Abfragezeichenfolge hat.

uRL kann sein 

http://localhost:4200/test?id=55555

oder

http://localhost:4200/test

Ich habe benutzt 

this.route.queryParams
     .filter(params => 'id' in params)
     .map(params => params.id)
     .distinctUntilChanged()
     .subscribe(
     id=> {
                //check lead Id here
                console.log(id);
            }
     );

Dies funktioniert jedoch nur, wenn die URL eine ID enthält. Sie sind sich nicht sicher, wie sie prüfen können, ob sie existiert. 

9
rishal

Ich würde sagen mit:

ngOnInit() {
 if (this.route.snapshot.queryParams['id']) {
      //do your stuff. example: console.log('id: ', this.route.snapshot.queryParams['id']);
 }
}

wäre ausreichend. Vergessen Sie nicht, private route: ActivatedRoute im Konstruktor und import { ActivatedRoute } from '@angular/router'; zu initialisieren.

Da müssen Sie nur prüfen, ob es existiert oder nicht. Wenn dies der Fall ist, würde wie ein Boolean hinzugefügt werden, um zu prüfen, ob es gesetzt wurde oder nicht. Wenn es nicht existiert, würde nichts passieren. Wenn Sie dann irgendwo anders in der Komponente etwas tun müssen, können Sie später boolean überprüfen, ob es wahr/falsch war, je nachdem, wie Sie es zuvor festgelegt haben.

1
Mukyuu

Sie können es direkt in Ihrer Abonnement-Funktion wie folgt überprüfen:

this.route.queryParams.subscribe((params)=> {
  //check lead Id here
  if(params['id']){
    console.log(params['id']);
  } else {
    console.log('id not found in params')
  }
});
8
ranakrunal9

Vorläufig

Wenn Sie queryParams wie unten abonniert haben, enthält die Variable params ein Objekt, in dem die Schlüssel alle Abfrageparameter sind und der Wert entweder ein einzelner Wert oder ein Array von Werten sein kann. Man kann eine console.log(params); durchführen, um dieses Ergebnis zu überprüfen. Zum Beispiel:

wenn die URL lautet: http://example.com/?lion=10&lion=15&cat=20

und dann versuchen wir zu sehen, was params hält:

this.route.queryParams.subscribe((params) => {
    console.log(params);
});

das Ergebnis wäre ein Objekt, bei dem die Schlüssel lion und cat sind, aber Werte für löwe ein Array sind, da es zwei Vorkommen hat und für cat ein einzelner Wert:

{ lion: [10, 15], cat:20 }

Beantwortung der Frage

Nehmen wir die URL an: http://example.com/?id&name=james

Man kann feststellen, dass es keinen Wert für die ID gibt. Möglicherweise hat eine URL nur einen Schlüssel, aber keinen Wert, und dennoch möchten wir wissen, dass der Schlüssel mindestens vorhanden ist. Wenn wir tun würden:

if(params['id']){
    // do something
}

diese Bedingung gibt false zurück, obwohl die Schlüssel-ID vorhanden ist. Wir möchten tatsächlich etwas tun, wenn der Schlüssel alleine vorhanden ist, und etwas anderes, wenn der Schlüssel und der Wert vorhanden sind. In diesem Fall können wir die lodash-Bibliothek verwenden, um die Ergebnisse von Schlüssel und Schlüssel/Wert effektiv zu sortieren. Nach dem Importieren der lodash-Bibliothek in das Projekt. Sie können _.has dazu verwenden:

// check if id key is present in params object first
if(_.has(params, 'id')) {
    if(params['id']=="") {
      // id key is present but has no value so do something
    } else {
      // id key is present and has a value as well so do something else
    }
} else {
    // since id key itself is not present do something totally different here
}

Im obigen Code wird natürlich davon ausgegangen, dass der ID-Schlüssel nur einmal in den URL-Parametern vorkommt. Andernfalls müsste man ein Array durchlaufen und jeden Wert überprüfen.

0

Ich nehme an, Sie verwenden das Angular Routing System hier. Fügen Sie dann die aktuell aktivierte Route wie folgt in den Konstruktor Ihrer Komponente ein:

constructor(private activatedRoute: ActivatedRoute)

Dann checke ein, d. H. Dein ngOnInit () wie folgt:

ngOnInit() {
    console.log("Hello ngOnInit");
    let token = null;
    this.activatedRoute.queryParamMap.subscribe((next : ParamMap) => {
      token = next.get("token")

      if (token) {
        console.log(token);
      } else {
        console.log("no token given in url");
      }
    });
  }
0
Rainer Feike

Da niemand die Verwendung von snapshot erwähnt hat, gebe ich meine Antwort damit. Wenn Sie tatsächlich kein Observable benötigen, was bedeutet, dass die URL einmal geändert wird (z. B. navigiert der Benutzer zur Bearbeitungsseite), können Sie die Snapshot-Alternative nutzen, die viel knapper ist. In Ihrer App könnten Sie also Folgendes tun:

constructor(private route: ActivatedRoute) {

}

ngOnInit(): void { 
    if (this.route.snapshot.params['id']) {
        // id exists, so do something with it.

    }
}

Aber bedenken Sie diesen Punkt:

Denken Sie daran: Sie erhalten nur den Anfangswert der Parameterzuordnung mit diese Technik. Bleiben Sie beim beobachtbaren paramMap-Ansatz, wenn es .__ gibt. sogar eine Chance, dass der Router die Komponente wiederverwenden könnte. Dieses Beispiel bleibt bei der beobachtbaren paramMap-Strategie für alle Fälle.

Quelle: Momentaufnahme: die nicht beobachtbare Alternative

0
jpgrassi

das ist der einfache Weg:

this.route.queryParams.subscribe(
    (params: Params) => {
        if (params.hasOwnProperty('id')) { console.log(params['id']); }
    }
);
0
Amin Adel