Я пытаюсь получить начальную дату с 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);
  });

}

Но это дает приведенную ниже ошибку

Unhandeled Promise rejection: базовая ссылка не задана. Пожалуйста, укажите значение для токена APP_BASE_HREF или добавьте базовый элемент в документ. ; Зона:; Задача: Promise.then; Значение: Ошибка: базовая ссылка не задана. Пожалуйста, укажите значение для токена APP_BASE_HREF или добавьте базовый элемент в документ.

Откуда Angular знает базовый HREF?

67
Sudha Bisht 1 Сен 2017 в 12:41

8 ответов

Лучший ответ

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

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

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

121
Chris Stillwell 6 Фев 2020 в 18:03
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
        }
        )

      }
2
Chris Stillwell 6 Фев 2020 в 18:04

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

Если параметр не изменится, можно рассмотреть возможность использования объекта 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"
}
4
edkeveked 23 Май 2018 в 08:40

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

}
3
Chris Stillwell 6 Фев 2020 в 18:04

используйте 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)
  })
}
2
Chris Stillwell 6 Фев 2020 в 18:04

< STRONG> Маршруты

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');
}
148
Chris Stillwell 6 Фев 2020 в 18:03
constructor(private activatedRoute: ActivatedRoute) {
}

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

 }
19
Chris Stillwell 6 Фев 2020 в 18:03

Вы можете попробовать это:

this.activatedRoute.paramMap.subscribe(x => {
    let id = x.get('id');
    console.log(id);  
});
1
Chris Stillwell 6 Фев 2020 в 18:04