Как получить параметр от url в угловом 4?

Ответ 1

Это должно сделать трюк, восстанавливающий параметры из URL:

constructor(private activatedRoute: ActivatedRoute) {
  this.activatedRoute.queryParams.subscribe(params => {
        let date = params['startdate'];
        console.log(date); // Print the parameter to the console. 
    });
}

Локальная дата переменной теперь должна содержать параметр startdate из URL-адреса. Модули Router и Params могут быть удалены (если они не используются в другом месте в классе).

Ответ 2

Маршруты

export const MyRoutes: Routes = [
    { path: '/items/:id', component: MyComponent }
]

Составная часть

import { ActivatedRoute } from '@angular/router';
public id: string;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
   this.id = this.route.snapshot.paramMap.get('id');
}

Ответ 3

constructor(private activatedRoute: ActivatedRoute) {
}

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

 }

Ответ 4

Принятый ответ использует наблюдаемый для извлечения параметра, который может быть полезен в параметре, будет меняться через жизненный цикл компонента.

Если параметр не изменится, можно использовать объект params для моментального снимка URL-адреса маршрутизатора.

snapshot.params возвращает все параметры в URL-адресе в объекте.

constructor(private route: ActivateRoute){}

ngOnInit() {
   const allParams = this.route.snapshot.params // allParams is an object
   const param1 = allParams.param1 // retrieve the parameter "param1"
}

Ответ 5

использовать paramMap

Это даст имена параметров и их значения

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

Ответ 6

Проверьте параметры из строки URL или как :param в вашем 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
}

}

Ответ 7

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

      }

Ответ 8

Это работает для меня Javascript единственным решением

fooobar.com/info/5739/...

вызовите это где угодно, чтобы получить параметр.

alert(this.gup('option', null));

Включить эту функцию

  gup(name, url) {
    if (!url) {
      url = location.href;
    }
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    const regexS = '[\\?&]' + name + '=([^&#]*)';
    const regex = new RegExp(regexS);
    const results = regex.exec(url);
    return results == null ? null : results[1];
  }