web-dev-qa-db-fra.com

Comment obtenir param depuis url in angular 4?

Je suis en train d’essayer de commencer date de url. L'URL ressemble à http: // sitename/booking? Startdate = 28-08-2017 Ci-dessous est mon code

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

}

sa donnant par le dessous l'erreur 

Rejet de la promesse non gérée: pas de base href set. 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: 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.

Comment angulaire devrait savoir base href?

angular
35
Sudha Bisht

Cela devrait faire l'affaire en récupérant les paramètres à partir 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 doit maintenant contenir le paramètre startdate de l'URL. Les modules Router et Params peuvent être supprimés (s'ils ne sont pas utilisés ailleurs dans la classe). 

65
Curiosity_is_Learning

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');
}
71
Dmitry Grinko
constructor(private activatedRoute: ActivatedRoute) {
}

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

 }
11
Teodor

utilisez paramMap

Cela fournira des noms de paramètres et leurs valeurs

//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)
  })
}
2
WasiF
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
        }
        )

      }
1
ganesh

La réponse acceptée utilise l'observable pour extraire le paramètre qui peut être utile car le paramètre changera tout au long du cycle de vie du composant.

Si le paramètre ne change pas, on peut envisager d’utiliser l’objet params 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"
}
1
edkeveked

Vérifiez les paramètres à partir d'une chaîne d'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
}

}
1
Hunter Frazier