Question

我试图从url获取startdate。网址看起来像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标记的值或向文档添加基本元素。

角度应如何知道基础href？

Answer 1

<强>路线

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

Answer 2

这应该可以从url中检索params：

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

本地变量日期现在应该包含URL中的 startdate 参数。可以删除模块Router和Params（如果没有在类中的其他地方使用）。

Answer 3

constructor(private activatedRoute: ActivatedRoute) {
}

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

 }

Answer 4

将它们分为两个网址。

URL模式/heroes/:limit。示例：/heroes/20
- 您可以使用route.snapshot.paramMap.get来获取原始价值。
- 从route.paramMap订阅以获取参数
URL模式/heroes。示例：/heroes?limit=20
- 您可以使用route.snapshot.queryParamMap

参考：All you need to know about Angular parameters

Answer 5

接受的答案使用observable来检索参数，该参数在参数中有用，会在整个组件生命周期内发生变化。

如果参数不会改变，可以考虑在路由器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"
}

Answer 6

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

Answer 7

检查URL字符串中的参数或routeConfig中的:param

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

}

Answer 8

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

      }

Answer 9

您可以尝试以下方法：

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

Answer 10

希望这对某人有所帮助。如果您在使用不是“id”的东西执行此操作时未定义，请检查您是否正在传递正确的参数：

如果你在 parent-component.ts 中的路由是：

 onSelect(elem) {
    this.router.navigateByUrl(`/element/${elem.type}`);
  }

在 child-component.ts 中

  type: string;
  elem: ElemModel;

  constructor(
    private elemService: ElemService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.route.params.subscribe((data) => {

      console.log(data);  // 'data' will give u an object with the type inside, check the 
      name of that type inside console of devTool, as u will put that name inside 
      data[HERE] down below.

      this.type = data["elem-type-maybe"]; // Don't do this.type = data["type"], do 
      data[NAME] as said above.

      this.elem = this.elemService.getElem(this.type); // getElem is method in service 
      which returns that specific type.
    });

Answer 11

请尝试从给定的预订 URL 路由参数获取开始日期：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {

  constructor(private activeRoute: ActivatedRoute) { 
    this.activeRoute.queryParams.subscribe((qp) => {
      console.log('Get Router Params:', this.activeRoute.snapshot.queryParams.startdate);
    });
  }

  ngOnInit(): void {
  }

}

有关路由 URL 的更多信息，您可以通过 here

Answer 12

这对我有效仅Java 解决方案

https://stackoverflow.com/a/979997/5237614

在任何地方调用它以获取参数。

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

如何从角度4的URL获取参数？

12 个答案: