node.js - Angular 7/8 - Uygulama bileşeninde URL parametreleri nasıl alınır


Benim tek oturum açma sistemim var ama test için değerleri localhost:4200/?id=test&name=testing&[email  URL'sinden okumak ve bunları uygulama bileşenindeki bir API'ye geçirmek istiyorum.

Tek giriş yapma işlevini kullanmak yerine URL'den okuyacağım temel bir bayrak olacak

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

ActivatedRoute'i denedim ama çalışıyor gibi görünmüyor.

queryParams, params, url, queryParamsMap denedim ama hiçbiri çalışıyor gibi görünmüyor. Aldığım tek şey boş değer.

uygulama bileşeni içinde

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.bileşen.html

<router-outlet></router-outlet>

uygulama-yönlendirme.modülü.ts

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

Stackoverflow veya diğer bloglarda bulabileceğim her şeyi denedim. Burada neyi kaçırdığımı biri gösterebilir mi?

Cevap #1

Bu rota için: Bu yolu deneyebilirsiniz:

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

AppComponent .ts dosyasında:

    constructor(
      private activatedRoute: ActivatedRoute,
    ) { }




    ngOnInit() {
      this.activatedRoute.params.subscribe(params => {
          const id = params['id'];
          console.log('Url Id: ',id);
    }

    OR

    ngOnInit() {
      this.activatedRoute.queryParams.subscribe(params => {
          const id = +params.id;
          if (id && id > 0) {
           console.log(id);
          }
      });
    }
  
  

Cevap #2

her şeyden önce sizinki gibi queryParams içeren bir URL var :

localhost:4200/?id=test&name=testing&[email 

bu şekilde ActivatedRoute nesnesi ile queryparams'a ulaşabilirsiniz, örneğin:

 this.name = this.activatedRoute.snapshot.queryParamMap.get('name'); // this.name = 'testing'

Veya :

 this.activatedRoute.queryParams.subscribe(params => {
       this.name= params['name'];
     });

ve diğer yol

localhost:4200/test/testing/[email

eşzamanlı alma (tek seferlik) için kullandığınız:

this.name = this.activatedRoute.snapshot.ParamMap.get('name');

İlgili makaleler