Wie bekomme ich Parameter von URL in Winkel 4?

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?

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).

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');
}

constructor(private activatedRoute: ActivatedRoute) {
}

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

 }

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

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"
}

Ü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
}

}

Sie können dies versuchen:

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

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)
  })
}

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
        }
        )

      }