Question

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

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

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

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

感谢您的帮助！

Answer 1

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

fetchInBackgroundWithBlock

Answer 2

您已将路线配置正确，以下是如何获取查询参数的解决方案。

以下是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);
   }
  }

希望这会有所帮助!!

Answer 3

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

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

然后从

获取vanilla JavaScript中的参数

this.document.location.search

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

将参数传递给Angular 2（RC4）应用程序

3 个答案: