如何从 Angular 4 中的 url 获取参数？答案

【问题标题】：How to get param from url in angular 4?如何从 Angular 4 中的 url 获取参数？
【发布时间】：2018-02-10 08:23:10
【问题描述】：

我正在尝试从 URL 获取 startdate。 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);
  });

}

但它给出了以下错误

未处理的 Promise 拒绝：未设置基本 href。请提供一个值为 APP_BASE_HREF 令牌或向文档添加基本元素。 ; 区域：;任务：Promise.then；值：错误：未设置基本 href。请为 APP_BASE_HREF 令牌提供一个值或添加一个基础元素添加到文档中。

Angular 是如何知道基本 href 的？

【问题讨论】：

angular.io/guide/router#the-basics

标签： angular

【解决方案1】：

更新

我相信 Dimitry Grinko 在这篇文章中的回答比这个更好。

旧答案

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

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 可以被移除（如果没有在类的其他地方使用）。

【讨论】：

这个答案是可行的，但是为什么在刷新带有url参数的页面后会使页面变为空白？
很难说。我想到的第一件事是，您可能正在打字稿代码的 ngOnInit 部分导航而不提供任何参数？然后它自然会回到组件没有任何参数。
Hello @Curiosity_is_Learning 我正在尝试将查询参数设置为全局变量。目前这个逻辑“日期”只能在这个订阅方法中使用，对吧？如何将这些查询参数值保留为全局变量。我试过 let.date =['startdate'] 但是在订阅方法之外的任何地方调用它时，它是未定义的。
嗨@Jesse，这应该很简单。只需在 Anulgar 组件的顶部声明一个变量，如下所示：private startDate: string; 然后您应该能够将let date = params['startdate']; 替换为this.startDate = params['startdate'];。然后，您可以在组件的其他地方尽可能多地重用该变量，只需调用this.startDate
@Curiosity_is_Learning 这正是我所做的，但是一旦我在订阅方法之外调用“this.startDate”。该值未定义。在 subscribe 方法中“this.startDate”打印出正确的日期。

【解决方案2】：

app.module.ts

import { Routes,RouterModule } from '@angular/router';

const routes: Routes = [
    { 
       path: '', 
       component: HomeComponent 
    }
    { 
       path: '/users/:id/:name', 
       component: UsersComponent 
    }
]

@NgModule({
   ....
   imports : [
       .......,
       RouterModule.appRoot(routes)
   ]
   ....
})

组件页面

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

export class UserComponent implements OnInit {
    user : {id: number, name: string};

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.user = {
            id : this.route.snapshot.params['id'],
            name : this.route.snapshot.params['name']   
        };

        this.route.params.subscribe((param : Params) => {
            this.user.id = param['id'];
            this.user.name = param['name'];
        });
    }
}

【讨论】：

【解决方案3】：

请尝试从给定您的预订 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

【讨论】：

【解决方案4】：

希望这对某人有所帮助。如果你在使用不是“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.
    });

【讨论】：

【解决方案5】：

constructor(private activatedRoute: ActivatedRoute) {
}

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

【讨论】：

这是我认为 Angular 5 的最佳答案。谢谢！
无法在控制台中未定义的下一个事件循环帧上解决 observable？
这给了我“未定义”
这也给了我“未定义”。出于某种原因，我怀疑这个问题发生在“ngOnInit”上。当我创建另一种方法并执行 (console.log(this.id) 时，我能够看到正确的数据。但是在你的答案中有 console.log 的确切位置；我在控制台中收到了一个未定义的数据。
我编辑了这个，我的错 :D 它给你 undefined 因为在控制台日志发生的那一刻，没有收到来自订阅的数据。（不要那样做：D，当时我是初学者），为了测试值，尝试将它放在同一个函数范围内。

【解决方案6】：

在 Angular 中，他们将其分成 2 种 url。

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

参考：All you need to know about Angular parameters

【讨论】：

【解决方案7】：

你可以试试这个：

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

【讨论】：

【解决方案8】：

检查 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
}

}

【讨论】：

【解决方案9】：

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

      }

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

路线

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

【讨论】：

这个答案比我接受的答案更好。谢谢！
如果我想发送一个对象并且不想在 url 中显示它，那么我能做什么？
@Anuj 使用服务
我的要求不是这样，我想点击一个表并将该表数据发送到具有 4-5 个字段的其他页面。
@Anuj 是的，您可以使用服务。 onClick(row: any) { this.shareService.setData(row); this.router.navigate(['/page2'])} 并且在您的 page2 中您可以获得此数据 ngOnInit() { const data = this.shareService.getData(); } 希望对您有所帮助

【解决方案12】：

接受的答案使用 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"
}

【讨论】：