路由中的Angular 2传递参数

时间:2017-08-24 12:34:58

标签: angular angular2-routing

是否可以在路线中传递参数,例如此处的示例 - 参数:['参数']

我不是指在Url中传递数据,但是当我在页面上时,我可以访问此视图路径中的参数。

import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "../app/home.component";
import { PageOneComponent } from "../app/pageone.component";
import { AppComponent } from "../app/app.component";

const mainRoutes: Routes = [
    {
        path: "",
        component: AppComponent,
        resolve: {
            app: AppResolverService
        },
        children: [
            {
                path: "",
                component: HomeComponent
            },
            {
                path: "/pageone",
                component: PageOneComponent
                params: ['parameters']
            },
        ]
    }
];

export const MAIN_ROUTE_MODULE = RouterModule.forRoot(mainRoutes);

2 个答案:

答案 0 :(得分:1)

您需要使用其他方式传递参数。

结帐:Router configuration

  

第三条路线中的数据属性是存储与此特定路线相关联的任意数据的位置。在每个激活的路由中都可以访问data属性。使用它来存储页面标题,面包屑文本和其他只读静态数据等项目。您将在后面的指南中使用解决防护来检索动态数据。

此外:Routes type

如果您想在网址中包含数据,可以尝试以下操作:https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero

答案 1 :(得分:0)

它有点笨拙,但您可以使用UrlMatcher来设置任意参数。就像在这个例子中一样:

const mainRoutes: Routes = [
  {
    // ...
    children: [
      {path: "", component: HomeComponent},
      {
        path: "/pageone",
        component: PageOneComponent,
        matcher: (url: UrlSegment[]) => ({
          consumed: url,
          posParams: {pageName: new UrlSegment('pageone', {pageName: 'pageone'})},
        }),
      }
    ]
    // ...
  }];