Як отримати параметр з url в кутовій 4?

Я намагаюся отримати дату початку з URL-адреси. URL-адреса виглядає такhttp://sitename/booking?startdate=28-08-2017

Мій код нижче:

aap.module.ts

    import {...};

    @NgModule({
      declarations: [
        AppComponent, ModalComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ReactiveFormsModule,
        RouterModule.forRoot([{
                path: '',
                component: AppComponent
            },
        ]),    
      ], 
      providers: [ContactService, AddonService, MainService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

aap.component.ts

import {...}
import {Router, ActivatedRoute, Params} from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {
  // subscribe to router event
  this.activatedRoute.queryParams.subscribe((params: Params) => {
    console.log(params);
  });

}

Але це дає нижче помилку

Невідпрацьоване відхилення обіцянки: Не встановлено базовий href. Введіть значення для маркера APP_BASE_HREF або додайте базовий елемент до документа. ; Зона:; Завдання: Promise.then; Значення: Помилка: Не встановлено базовий href. Введіть значення для маркера APP_BASE_HREF або додайте базовий елемент до документа.

Звідки Angular знає базовий href?

Це має зробити фокус, отримуючи параметри з 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 можна видалити (якщо вони не використовуються десь у класі).

Маршрути

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

constructor(private activatedRoute: ActivatedRoute) {
}

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

У кутовому вигляді вони розділяють його на 2 види url.

1. Шаблон URL-адреси /heroes/:limit. Приклад:/heroes/20

   • Ви можете отримати необроблену вартість за допомогою route.snapshot.paramMap.get.
   • Підпишіться на, route.paramMapщоб отримати параметри

2. Шаблон URL-адреси /heroes. Приклад:/heroes?limit=20

   • Ви можете отримати необроблену вартість за допомогою route.snapshot.queryParamMap

Довідково: Все, що вам потрібно знати про кутові параметри

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

Якщо параметр не зміниться, можна розглянути можливість використання об’єкта 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"
}

Перевірте параметри з рядка 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
}

}

Ви можете спробувати це:

this.activatedRoute.paramMap.subscribe(x => {
    let id = x.get('id');
    console.log(id);  
});

використання 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)
  })
}

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

      }