如何从角度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？

这应该可以从网址中检索参数：

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

现在，本地变量date应该包含URL中的startdate参数。可以删除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种网址。

1. 网址格式/heroes/:limit。例：/heroes/20

   • 您可以使用获得原始价值route.snapshot.paramMap.get。
   • 订阅route.paramMap以获取参数

2. 网址格式/heroes。例：/heroes?limit=20

   • 您可以通过使用获得原始价值 route.snapshot.queryParamMap

参考：您需要了解的有关Angular参数的所有信息

可接受的答案使用可观察到的参数来检索该参数，该参数在整个组件生命周期中都会改变，这很有用。

如果该参数不变，则可以考虑在路由器URL快照上使用params对象。

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中检查参数

下游组件

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

      }