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?
Antworten:
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).
quelle
private startDate: string;
dann sollten Sie in der Lage sein , das zu ersetzen ,let date = params['startdate'];
mitthis.startDate = params['startdate'];
. Dann können Sie die Variable an beliebiger Stelle in der Komponente wiederverwenden, indem Sie einfachthis.startDate
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'); }
quelle
constructor(private activatedRoute: ActivatedRoute) { } ngOnInit() { this.activatedRoute.params.subscribe(paramsId => { this.id = paramsId.id; }); console.log(this.id); }
quelle
Im Winkel trennen sie es in 2 Arten von URLs.
URL-Muster
/heroes/:limit
. Beispiel:/heroes/20
route.snapshot.paramMap.get
.route.paramMap
, um Parameter zu erhaltenURL-Muster
/heroes
. Beispiel:/heroes?limit=20
route.snapshot.queryParamMap
Referenz: Alles, was Sie über Winkelparameter wissen müssen
quelle
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" }
quelle
Überprüfen Sie die Parameter anhand der URL-Zeichenfolge oder als
:param
anhand der in Ihrer routeConfigdownstream.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 } }
quelle
Sie können dies versuchen:
this.activatedRoute.paramMap.subscribe(x => { let id = x.get('id'); console.log(id); });
quelle
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) }) }
quelle
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 } ) }
quelle