Angular 将参数传递到角度2（RC4）应用程序

我想首先通过url查询参数将参数传递给我的Angular2应用程序。 因此，如果用户键入

http://myapp.com?r=www.stackoverflow.com

在浏览器的地址栏中，我想获取参数

r

的值，将其存储在会话存储中，稍后使用。我不想在组件之间传递该值

正确的方法是什么？我是否需要在我的路线中配置它？如果需要，我如何配置

    export const routes: RouterConfig = [
       { path: ':r', component: LandingComponent },
    ....

这不起作用，或者我不知道如何获得值

---

谢谢你的帮助

您可以像这样将参数传递给url

<a [routerLink]="['/about', { foo: 'foo' }]">About</a>

import { Component ,   OnInit  } from "@angular/core";
import { Title } from "@angular/platform-browser";
import { ActivatedRoute }   from "@angular/router";
import { Observable }     from "rxjs/Observable";

@Component({
    template: "<h1>About page! {{ paramName | async }}</h1>",
})

export class AboutComponent implements OnInit {
      public constructor(private route: ActivatedRoute) {}
   public paramName: Observable<string>;
   public ngOnInit() {
       // console.log("App component loaded");
        this.setTitle( "about" );
        this.paramName = this.route.params.map(params => params["foo"] || "None");
    }
};

关于
从“@angular/core”导入{Component，OnInit}；
从“@angular/platform browser”导入{Title}”；
从“@angular/router”导入{ActivatedRoute}”；
从“rxjs/Observable”导入{Observable}；
@组成部分({
模板：“关于页面！{paramName | async}}”，
})
导出类AboutComponent在NIT上实现{
公共构造函数（私有路由：ActivatedRoute）{}
公共参数名称：可见；
公共ngOnInit（）{
//console.log（“加载了应用程序组件”）；
本.设定标题（“关于”）；
this.paramName=this.route.params.map（params=>params[“foo”]| |“None”）；
}
};

您已经正确配置了路由，下面是如何获取查询参数的解决方案

这是你的电话号码

---

我最终通过将文档注入构造函数解决了这个问题

constructor(@Inject(DOCUMENT) private document: any)

然后从

this.document.location.search

---

这对我来说是可行的，但我不确定它是否适用于Angular2可以运行的所有环境。

是否要从浏览器URL栏或默认路由传递它们？问题是关于如何在代码中添加它们，还是如何在代码中读取它们？我的答案是否就是您所寻找的？@GünterZöchbauer我想从浏览器URL传入参数，所以问题是关于在代码中读取它。例如，使用

http://myapp.com?r=www.stackoverflow.com

我想在启动时读取参数

r

的值，然后在以后某个时候使用它。这似乎是答案。这对我有帮助。这适用于将参数从一个组件传递到另一个组件。我正在努力解决的是在启动时传递一个参数。因此，当使用

http://myapp.com?r=www.stackoverflow.com

我想在启动时捕获param

r

的值，然后忘记它。这应该是您要查找的，但是

queryParams

而不是'params'。这不是用于在组件之间传递参数。@GünterZöchbauer根据RC4上的ActivatedRoute中没有queryParams。Params是可观察的类型——但当我像这样订阅它时，

this.activatedRoute.Params.map（Params=>Params['r']）。subscribe（（r）=>{alert（“r:+r”）；}）我没有通过URL获得传入的值
this.activatedRoute.snapshot.params.r
也不包含该值。我认为quetyParam在路由上，而不是在ActiveDurote上。如果您按照回答中提到的方式尝试，则应该具有该值。@JorawarSingh activatedRoute是我在构造函数中给出的名称。只要它是ActivatedRoute类型，无论你如何命名它都不重要。不确定我是否理解你的意思。这将值123从“主组件”传递到平台组件。但我想首先通过浏览器的URL传入值123。
this.document.location.search