Question

我做了很多研究，但我似乎没有找到确切的答案......

我的问题很简单;我有一条路线，让我们称之为父母/孩子＆＃34;，如果没有提供参数，我想在其中设置默认参数（父母/子女？param1 = xxx＆amp; param2 = xxx等等。）

我的网址中经常需要参数，因为它允许我更新页面上依赖这些参数的图形。我也希望它们在URL中而不是在localeStorage / Session或服务上，因为我的用户很容易复制/粘贴以共享页面。

我尝试了几件事，比如：

{
        path: 'parent',
        component: Parent,
        children: [
            {
                path: 'child',
                redirectTo: 'child:param1:param2'
            },
            {
                path: 'child:param1:param2',
                component: Child
            },

但它不起作用。我已经考虑过我的组件之间的共享服务，以便在没有提供它们时设置这些参数，但之后我想我应该做一些像route.navigate（[myLocation]，myParams）来更改带有参数的URL。那么这意味着每次我需要检索我当前的位置？

如果有人可以帮助我，我有点困惑。谢谢！

编辑：我的app.routes：

{
        path: 'parent',
        component: Parent,
        children: [
            {
                path: 'child',
                component: Child
            },
        ]
},
{
        path: '**',
        redirectTo: '/parent/child'
}

很抱歉，如果这是一个愚蠢的问题，那一定是语法错误......

Answer 1

只需添加以下网址：

即可

{
    path: 'child',
    redirectTo: 'child/a/b'
},

其中"a"是param1的值，"b"的{{1}}

Answer 2

根据官方路由器指南，路由可以包含必需和可选的查询参数。

必需参数（即/ parent / child / required）

  {
    path: '',
    redirectTo: '/parent/child/required',
    pathMatch: 'full'
  },
  {
    path: 'parent',
    component: ParentComponent,
    children:[
      {
        path: 'child/:info',
        component: ChildComponent
      }
    ]
  }

http://plnkr.co/edit/35oXBWL1rg7biLgww3TF（点击＆＃39;在单独的窗口中启动预览＆＃39;查看网址）

可选参数（即/ parent / child？info = optional）

this.router.navigate(['/parent/child',{info: "optional"}]);

http://plnkr.co/edit/HPwcfN9BUYqcSrWEawd6（点击＆＃39;在单独的窗口中启动预览＆＃39;查看网址）

编辑：systemjs中的版本已硬编码以修复插件

Answer 3

路由仅定义所需参数。不包括可能存在或不存在的参数

{
    path: 'child',
    component: Child
}

导航至Child并提供您将要执行的几个参数

this.router.navigate(['/parent/child', {optionA:value1,optionB:value2}]);

这将导航到 / parent / child; optionA = value1; optionB = value2 。在Child组件内，您订阅了ActivatedRoute.params，以便每次参数更改时都会收到通知。

儿童

import {ActivatedRoute, Router} from '@angular/router'; ... constructor(private activeRoute:ActivatedRoute, private router:Router){} //chart options optionA; optionB; //redraws the chart redrawChart(){/*todo*/} ngOnInit(){ this.activeRoute.params.subscribe( //executed each time new params arrive params => { this.optionA = params['optionA'] || null; this.optionB = params['optionB'] || null; this.redrawChart(); } ); }

要更改图表选项，您可以执行

changeChart(a, b){ this.router.navigate(['/parent/child',{optionA:a,optionB:b}]); }

有关如何处理更改路线参数的更多信息，see the manual（搜索 params.subscribe ）

尽管如此，你是对的。 ChartService会更清洁。您的组件可以订阅该服务公开的chartOptionsChanged Observable，只需更新图表即可。

Angular 2 RC6 - 在URL中设置默认参数并重定向到使用参数的路由

3 个答案: