web-dev-qa-db-fra.com

Angular 7/8 - Comment obtenir les paramètres d'url dans le composant d'application

L'authentification unique est en place, mais pour les tests, je souhaite lire les valeurs de l'url localhost:4200/?id=test&name=testing&[email protected] et transmettez-les à une API dans un composant d'application.

il y aura un indicateur sur lequel je lirai à partir de l'url au lieu d'utiliser la fonction d'authentification unique

if (url_enabled == true) {
    getParamsFromUrl()
 } else {
   singleSignOn()
 }

J'ai essayé ActivatedRoute mais cela ne semble pas fonctionner.

J'ai essayé queryParams, params, url, queryParamsMap mais aucun de ceux-ci ne semble fonctionner. tout ce que j'obtiens est une valeur vide.

à l'intérieur du composant d'application

app.component.ts

 getParamsFromUrl() {
    this._router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        console.log(e.url)
      }
    })
  }

 this.route.queryParams.subscribe(params => {
      console.log(params);
    })

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts

const routes: Routes = [
  {path:'*/:id', component: AppComponent},
];

J'ai essayé tout ce que j'ai pu trouver sur stackoverflow ou d'autres blogs. Quelqu'un peut-il indiquer ce que je manque ici?

node.jsangulartypescriptecmascript-6angular8
3
Lovika

Tu peux essayer comme ça

constructor(
  private activatedRoute: ActivatedRoute
)

ngOnInit() {
  this.activatedRoute.paramMap
            .pipe(
               tap(console.log(this.activatedRoute.snapshot.paramMap.get(
                        "id"
                   )))
             ).subscribe()
}

Faites-moi savoir si vous avez besoin d'aide

0
Tony Ngo

Vous devez créer un nouveau composant et mettre à jour la configuration de routage comme suit:

Commencez par créer un nouveau composant: MainComponent:

import { Component } from '@angular/core';

@Component({
  selector: 'main',
  template: `<router-outlet></router-outlet>`,
})
export class MainComponent {
  constructor() {  }
}

Ensuite, mettez à jour votre AppModule:

import { AppComponent } from './app.component';
import { MainComponent } from './main.component';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot([
      {path: '', component: AppComponent}
    ])
  ],
  declarations: [ MainComponent, AppComponent ],
  bootstrap:    [ MainComponent ]
})
export class AppModule { }

Enfin, vous devrez mettre à jour votre index.html fichier (assurez-vous de charger le tout nouveau composant au lieu du AppComponent):

<main>loading</main>

Vous pourrez maintenant lire vos paramètres comme demandé dans votre AppComponent:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  params: Params;

  constructor(private route: ActivatedRoute){}

  ngOnInit() {
      this.route.queryParams.subscribe((params: Params) => {
        this.params = params;
        console.log('App params', params);
        const id = params['id'];
        console.log('id', id);
      });
  }
}

Voir un exemple de travail ici: https://read-params-app-component.stackblitz.io/?id=test&name=testing&[email protected] .

Et trouvez le code source ici .

J'espère que ça aide!

0
luixaviles