将参数传递给 Angular 2 (RC4) 应用程序答案

【问题标题】：Pass param to Angular 2 (RC4) application将参数传递给 Angular 2 (RC4) 应用程序
【发布时间】：2023-03-22 09:05:01
【问题描述】：

我最初想通过 url 查询参数将参数传递给我的 Angular2 应用程序。因此，如果用户在浏览器的地址栏中键入http://myapp.com?r=www.stackoverflow.com，我想获取参数r 的值以将其存储在 sessionStorage 中并稍后使用。我不想在组件之间传递该值。

这样做的正确方法是什么？我是否需要在我的路线中配置它，如果需要，我该怎么做？

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

这不起作用，或者我无法弄清楚如何获得价值。

感谢您的帮助！

【问题讨论】：

您想从浏览器的 URL 栏中传递它们还是从默认路由传递它们？问题是如何在代码中添加它们，还是如何在代码中读取它们？
我的回答是你要找的吗？
@GünterZöchbauer 我想从浏览器 URL 传递参数，所以问题是关于在代码中读取它。例如。当使用http://myapp.com?r=www.stackoverflow.com调用我的应用程序时，我想在启动时读取参数r 的值，然后稍后再使用它。
这似乎是答案。它对我有帮助。 answer

标签： angular angular2-routing

【解决方案1】：

你可以像这样向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");
    }
};

【讨论】：

这适用于将参数从一个组件传递到另一个组件。我正在努力解决的是在启动时传入一个参数。因此，当使用http://myapp.com?r=www.stackoverflow.com 启动我的应用程序时，我想在启动时捕获参数r 的值，然后忘记它。
这应该是您正在寻找的，但queryParams 而不是“参数”。这不是用于在组件之间传递参数。
@GünterZöchbauer 根据docs，RC4 上的 ActivatedRoute 中没有 queryParams。 Params 是 Observable 类型——但是当我像 this.activatedRoute.params .map(params => params['r']) .subscribe((r) => { alert("r: " + r); }); 那样订阅它时，我没有得到通过 URL 传入的值。 this.activatedRoute.snapshot.params.r也不包含值。
我认为 quetyParam 在 Route 上而不是在 ActivedRoute 上。如果您按照答案中所述尝试，则应该具有价值。
@JorawarSinghactivatedRoute 是我在构造函数中给它起的名字。只要它是 ActivatedRoute 类型，你如何命名它都没有关系。

【解决方案2】：

我最终通过将文档注入构造函数来解决它

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

然后像在原生 JavaScript 中一样从

获取参数

this.document.location.search

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

【讨论】：

【解决方案3】：

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

这里是Plunker!!

export const routes: RouterConfig = [
   { path: '', redirectTo: '123', terminal: true },
   { path: ':id', component: LandingComponent   }
];

  @Component({
   selector: 'landing-component',
   template: `
   landing component
  `
  })
  export class LandingComponent   {
   id = "";
   constructor(private route: ActivatedRoute) {}
 
   ngOnInit() {
    const s: ActivatedRouteSnapshot = this.route.snapshot;
    this.id = s.params["id"];
    console.log(this.id);
   }
  }

【讨论】：

不确定我是否理解正确。这会将值 123 从“主要组件”传递到着陆组件。但我想最初通过浏览器的 URL 传入值 123。