Wie bekomme ich Parameter von URL in Winkel 4?

76

Ich versuche, das Startdatum von der URL abzurufen. Die URL sieht aus wiehttp://sitename/booking?startdate=28-08-2017

Mein Code ist unten:

aap.module.ts

    import {...};

    @NgModule({
      declarations: [
        AppComponent, ModalComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ReactiveFormsModule,
        RouterModule.forRoot([{
                path: '',
                component: AppComponent
            },
        ]),    
      ], 
      providers: [ContactService, AddonService, MainService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

aap.component.ts

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

constructor(private activatedRoute: ActivatedRoute) {
  // subscribe to router event
  this.activatedRoute.queryParams.subscribe((params: Params) => {
    console.log(params);
  });

}

Aber es gibt den folgenden Fehler

Ablehnung eines nicht gehandelten Versprechens: Kein Basis-Href-Set. Bitte geben Sie einen Wert für das Token APP_BASE_HREF an oder fügen Sie dem Dokument ein Basiselement hinzu. ;; Zone: ; Aufgabe: Promise.then; Wert: Fehler: Keine Basis-HREF gesetzt. Bitte geben Sie einen Wert für das Token APP_BASE_HREF an oder fügen Sie dem Dokument ein Basiselement hinzu.

Woher kennt Angular die Basis href?

Sudha Bisht
quelle

Antworten:

128

Dies sollte den Trick machen, der die Parameter von der URL abruft:

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.queryParams.subscribe(params => {
        let date = params['startdate'];
        console.log(date); // Print the parameter to the console. 
    });
}

Das Datum der lokalen Variablen sollte jetzt den Parameter startdate aus der URL enthalten. Die Module Router und Params können entfernt werden (wenn sie nicht an einer anderen Stelle in der Klasse verwendet werden).

Ørjan
quelle
Diese Antwort ist Arbeit, aber warum wird die Seite nach dem Aktualisieren der Seite, die einen Parameter für die URL hat, leer?
Fai Zal Dong
Schwer zu erzählen. Das erste, was mir in den Sinn kommt, ist, dass Sie möglicherweise im Abschnitt ngOnInit des Typoskript-Codes navigieren, ohne Parameter anzugeben? Dann wird es natürlich ohne Parameter zur Komponente zurückkehren.
Ørjan
Hallo @Curiosity_is_Learning Ich versuche, die Abfrageparameter als globale Variable festzulegen. Derzeit ist mit dieser Logik "Datum" nur innerhalb dieser Abonnementmethode verfügbar, oder? So behalten Sie den Wert dieser Abfrageparameter als globale Variable bei. Ich habe versucht, let.date = ['startdate'], aber wenn ich es irgendwo außerhalb der subscribe-Methode aufrufe, ist es undefiniert.
Jesse
hi @Jesse, das sollte ziemlich einfach sein. Nur eine Variable in der Spitze Ihrer Anulgar Komponente wie folgt erklären: private startDate: string;dann sollten Sie in der Lage sein , das zu ersetzen , let date = params['startdate'];mit this.startDate = params['startdate'];. Dann können Sie die Variable an beliebiger Stelle in der Komponente wiederverwenden, indem Sie einfachthis.startDate
Ørjan
@Curiosity_is_Learning Genau das habe ich getan, aber sobald ich "this.startDate" außerhalb der subscribe-Methode aufrufe. Der Wert ist undefiniert. Innerhalb der Abonnementmethode "this.startDate" wird das richtige Datum ausgedruckt.
Jesse
151

Routen

export const MyRoutes: Routes = [
    { path: '/items/:id', component: MyComponent }
]

Komponente

import { ActivatedRoute } from '@angular/router';
public id: string;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
   this.id = this.route.snapshot.paramMap.get('id');
}
Dmitry Grinko
quelle
13
Diese Antwort funktioniert in meinem Fall besser als die akzeptierte. Vielen Dank!
Ben
Wenn ich ein Objekt senden und das nicht in der URL anzeigen möchte, was kann ich dann tun?
Anuj
@ Anuj Service nutzen
Dmitry Grinko
Meine Anforderung ist nicht so, ich möchte auf eine Tabelle klicken und diese Tabellendaten an eine andere Seite mit 4-5 Feldern senden.
Anuj
1
@ Anuj ja, du kannst den Service dafür nutzen. onClick (row: any) {this.shareService.setData (row); this.router.navigate (['/ page2'])} und auf Ihrer Seite2 können Sie diese Daten abrufen ngOnInit () {const data = this.shareService.getData (); } Hoffe es hilft
Dmitry Grinko
19
constructor(private activatedRoute: ActivatedRoute) {
}

ngOnInit() {
    this.activatedRoute.params.subscribe(paramsId => {
        this.id = paramsId.id;
    });
    console.log(this.id);

 }
Teodor
quelle
4
Dies ist meiner Meinung nach die beste Antwort für Winkel 5. Danke!
Kombinieren Sie
1
Kann nicht beobachtbar im nächsten Eventloop-Frame mit undefiniert in der Konsole aufgelöst werden?
vp_arth
Dies gibt mir "undefiniert"
Sarah
Dies gibt mir auch "undefiniert". Aus irgendeinem Grund vermute ich, dass dieses Problem bei "ngOnInit" auftritt. Wenn ich eine andere Methode erstellt und ausgeführt habe (console.log (this.id), kann ich die richtigen Daten sehen. Wenn Sie console.log jedoch genau dort haben, wo Sie es in Ihrer Antwort haben, habe ich eine undefinierte in der Konsole erhalten.
Jesse
11

Im Winkel trennen sie es in 2 Arten von URLs.

  1. URL-Muster /heroes/:limit. Beispiel:/heroes/20

    • Sie können Rohwert erhalten, indem Sie verwenden route.snapshot.paramMap.get.
    • Abonnieren Sie von route.paramMap, um Parameter zu erhalten
  2. URL-Muster /heroes. Beispiel:/heroes?limit=20

    • Sie können Rohwert erhalten, indem Sie verwenden route.snapshot.queryParamMap

Referenz: Alles, was Sie über Winkelparameter wissen müssen

Hoang Tran Sohn
quelle
6

Die akzeptierte Antwort verwendet das Observable, um den Parameter abzurufen, der für den Parameter nützlich sein kann, der sich während des gesamten Komponentenlebenszyklus ändert.

Wenn sich der Parameter nicht ändert, können Sie die Verwendung der Parameter in Betracht ziehen Objekt im Snapshot der Router-URL verwenden.

snapshot.params Gibt alle Parameter in der URL eines Objekts zurück.

constructor(private route: ActivateRoute){}

ngOnInit() {
   const allParams = this.route.snapshot.params // allParams is an object
   const param1 = allParams.param1 // retrieve the parameter "param1"
}
edkeveked
quelle
4

Überprüfen Sie die Parameter anhand der URL-Zeichenfolge oder als :param anhand der in Ihrer routeConfig

downstream.component.ts

...
import {Router,ActivatedRoute} from '@angular/router';
...    
export class DownstreamComponent  {
    constructor(
    private route: ActivatedRoute,
    private router: Router
) {
    if(this.route.snapshot.queryParams) 
      console.log(this.route.snapshot.params); // e.g. :param1 in routeConfig
    if(this.route.snapshot.queryParamMap.get('param1'))
      console.log(this.route.snapshot.queryParamMap.get('param1')); // e.g. in URI ?param1=blah
}

}
Hunter Frazier
quelle
3

Sie können dies versuchen:

this.activatedRoute.paramMap.subscribe(x => {
    let id = x.get('id');
    console.log(id);  
});
Boris Detry
quelle
2

verwenden paramMap

Dadurch werden Parameternamen und deren Werte bereitgestellt

//http://localhost:4200/categories/1
//{ path: 'categories/:category', component: CategoryComponent },

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

ngOnInit() {

  this.route.paramMap.subscribe(params => {
        console.log(params)
  })
}
WasiF
quelle
2
import {Router, ActivatedRoute, Params} from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.paramMap
    .subscribe( params => {
    let id = +params.get('id');
    console.log('id' + id);
    console.log(params);


id12
ParamsAsMap {params: {…}}
keys: Array(1)
0: "id"
length: 1
__proto__: Array(0)
params:
id: "12"
__proto__: Object
__proto__: Object
        }
        )

      }
Ganesh
quelle