Angular 7/8 - 如何在应用组件中获取 url 参数

Question

I have Single sign on in place but for testing I want to read the values from the url localhost:4200/?id=test&name=testing&email=testing@test.com and pass them to an API in app component.

there will be a flag on which basis I will reading from url instead of using single sign on function

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

I tried ActivatedRoute but it doesn't seem to be working.

I have tried queryParams, params, url, queryParamsMap but none of these seems to be working. all I get is empty value.

inside app component

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},
];

I have tried whatever I could found on stackoverflow or other blogs. Can somebody point out what am I missing here?

Answer 1

For this route: You can try this way:

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

In AppComponent .ts file:

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

Answer 2

first of all there is an url with queryParams like yours :

localhost:4200/?id=test&name=testing&email=testing@test.com

in this way tou get to the queryparams with ActivatedRoute object lik :

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

Or :

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

and the other way is

localhost:4200/test/testing/testing@test.com

you use for sync retrieval (one time) :

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

Answer 3

Angular comes us with the ActivatedRoute object. We can access the URL parameter value in same way its done above with little difference. Data in this type can be accessed with two different ways. One is through route.snapshot.paramMap and the other is through route.paramMap.subscribe. The main difference between the two is that the subscription will continue to update as the parameter changes for that specific route.

ngOnInit() {
    this.route.paramMap.subscribe(params => {
        this.userType = params.get("userType")
    })
}

Answer 4

You need to create a new component and update the routing configuration as follows:

First, create a new component: MainComponent :

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

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

Then, update your 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 { }

Finally, you'll need to update your index.html file(Make sure to load the brand new component instead of the AppComponent ):

<main>loading</main>

Now you'll be able to read your parameters as requested in your 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);
      });
  }
}

See a working example here: https://read-params-app-component.stackblitz.io/?id=test&name=testing&email=testing@test.com .

And find the source code here .

I hope it helps!

Answer 5

You can try like this

constructor(
  private activatedRoute: ActivatedRoute
)

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

Let me know if you need any help

Answer 6

Using Transition from @uirouter/core makes it easy to get params from url.

import {Transition} from '@uirouter/core';

@Component()
export class MyComponent {
public myParam = this.transition.params().myParam;

public constructor(public transition: Transition) {}
}

Answer 7

I used jquery inside angular 8 and got the href using jquery $ variable after declaring it in app component.

import { query } from '@angular/animations';

declare var $: any;