Comment obtenir un paramètre à partir d'une url dans angular 4 ?

Question

J'essaie d'obtenir la date de début à partir de l'URL. L'URL ressemble à http://sitename/booking?startdate=28-08-2017

Mon code est le suivant :

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

}

Mais il donne l'erreur suivante

Rejet des promesses non tenues : Pas de base href définie. Veuillez fournir une valeur pour le jeton APP_BASE_HREF ou ajouter un élément de base au document ; Zone : ; Tâche : Promise.then ; Valeur : Erreur : Aucun href de base défini. Veuillez fournir une valeur pour le jeton APP_BASE_HREF ou ajouter un élément de base au document. au document.

Comment Angular connaît-il le href de base ?

Answer 1

Routes

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

Composant

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
   this.id = this.route.snapshot.paramMap.get('id');
}

Answer 2

Cela devrait faire l'affaire en récupérant les paramètres de l'url :

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

La variable locale date devrait maintenant contenir le date de début de l'URL. Les modules Router et Params peuvent être supprimés (s'ils ne sont pas utilisés ailleurs dans la classe).

Answer 3

constructor(private activatedRoute: ActivatedRoute) {
}

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

 }

Answer 4

La réponse acceptée utilise l'observable pour récupérer le paramètre, ce qui peut être utile lorsque le paramètre change tout au long du cycle de vie du composant.

Si le paramètre ne change pas, on peut envisager d'utiliser la fonction paramètres sur l'instantané de l'url du routeur.

snapshot.params renvoie tous les paramètres de l'URL dans un objet.

constructor(private route: ActivateRoute){}

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

Answer 5

Vérifier les paramètres à partir de la chaîne de l'URL ou en tant que :param dans votre 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
}

}