CODEWITHSUNDEEP
angulartypescriptangular-routing
CrackkiiCrazy
CrackkiiCrazy

Reputation: 13

My query parameters are not being detected

I am trying to write an Angular app that loads a different login page based on the "groupId" that I set in the URL. The idea is to send each client a URL that contains a particular "groupId" as a parameter. A template is used to load the page where the page's text and pictures are pulled from the firebase repo using that specific company's groupId.

I tried using query params as follows:

(In my component):

  ngOnInit() {
    console.log('test');

    console.log(this.activeRoute.queryParams);
     this.activeRoute.queryParams
    .subscribe(params => {
      this.groupId = params.groupId;
   })
   console.log(this.groupId);
   if (this.groupId === undefined) {
    this.router.navigate(['/login/locked']);
   }
  }

(and my routes in the parent component):

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    children: [
      {
        path: '', component: SignInComponent,
      },
      {
        path: 'signup', component: SignUpComponent,
      },
      {
        path: 'locked', component: LockScreenComponent,
      },
      {
        path: 'password-rest', component: PasswordResetComponent,
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthPagesRoutingModule { }

However, I keep on getting an undefined from the console.log(this.groupId) when I paste www.example.com/login?groupId=FACEBOOK235 into the search bar (and thereby navigating me to the locked screen).

Am I missing something?

Upvotes: 0

Views: 3523

Answers (3)

Aakash Garg
Aakash Garg

Reputation: 10969

because your if condition is outside subscribe the queryParams observables is asyncronous. your code should be :-

ngOnInit() {
    console.log('test');

    console.log(this.activeRoute.queryParams);
     this.activeRoute.queryParams
    .subscribe(params => {
      this.groupId = params.groupId;
      console.log(this.groupId);
      if (this.groupId === undefined) {
       this.router.navigate(['/login/locked']);
      }
   })
  }

(EDIT) When I log the complete parameter list I get:

closed: false
destination: BehaviorSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
hasError: false
isStopped: false
observers: []
operator: MapOperator {thisArg: undefined, project: ƒ}
source: BehaviorSubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
thrownError: null
_isScalar: false
[[Prototype]]: Subject
complete: ƒ complete()
constructor: class AnonymousSubject
error: ƒ error(err)
next: ƒ next(value)
_subscribe: ƒ _subscribe(subscriber)
[[Prototype]]: Observable
asObservable: ƒ asObservable()
complete: ƒ complete()
constructor: class Subject
error: ƒ error(err)
lift: ƒ lift(operator)
next: ƒ next(value)
unsubscribe: ƒ unsubscribe()
_subscribe: ƒ _subscribe(subscriber)
_trySubscribe: ƒ _trySubscribe(subscriber)
Symbol(rxSubscriber): ƒ [_internal_symbol_rxSubscriber__WEBPACK_IMPORTED_MODULE_2__.rxSubscriber]()
[[Prototype]]: Object

Upvotes: 1

Barış Can Yılmaz
Barış Can Yılmaz

Reputation: 735

You subscribe an observable and they are asynchronous and your if condition outside the subscribe method so when you access your groupId propery you get undefined. you should access it in subscribe method.

ngOnInit() {
     this.activeRoute.queryParams
    .subscribe(params => {
      this.groupId = params.groupId;
      console.log(this.groupId);
      if (this.groupId === undefined) {
         this.router.navigate(['/login/locked']);
      }

   })   
  }

Upvotes: 1

rozpuszczalny
rozpuszczalny

Reputation: 98

Call to this.activeRoute.queryParams.subscribe is not synchronous, therefore console.log keeps reporting undefined. Add this check inside subscribe, like so:

this.activeRoute.queryParams
 .subscribe(params => {
   this.groupId = params.groupId;
   console.log(this.groupId);
   if (this.groupId === undefined) {
     this.router.navigate(['/login/locked']);
   }
})

Also, you may like to check Guards - that's something you might need: https://angular.io/guide/router-tutorial-toh#milestone-5-route-guards . By adding CanActivate guard which returns true or URL tree, you'll achieve what you want.

Upvotes: 0

Related Questions