Question

我正在构建一个简单的应用程序，有人可以通过表单中的电子邮件搜索用户，然后查看与该用户关联的各种数据。

对于顶级AppComponent组件，我有以下路由：

@Routes([
  {path: '/:name',  component: CustomerComponent},
  {path: '/search',  component: SearchComponent}
])

搜索路径对应于搜索客户的表单，而/：名称路径用于显示该客户的数据。

我的想法是让客户组件具有一些基本布局，或许可能像用户个人资料图片之类的东西，然后链接到客户资料的不同部分，如下所示：

@Routes([
  {path: '/profile',  component: CustomerProfileComponent},
  {path: '/loyalty',  component: CustomerLoyaltyComponent},
  {path: '/coupons',  component: CustomerCouponsComponent},
  {path: '/settings',  component: CustomerSettingsComponent}
])

和html：

<div>
    <span>
        <a [routerLink]="['./profile']">Profile</a>
        <a [routerLink]="['./loyalty']">Loyalty</a>
        <a [routerLink]="['./coupons']">Coupons</a>
        <a [routerLink]="['./settings']">Settings</a>
    </span>
</div>
<div>
    <router-outlet></router-outlet>
</div>

我希望这个布局会让我有这样的网址：

/search
/joe/profile
/joe/loyalty
/joe/coupons
/joe/coupons/14/
/joe/coupons/14/edit
...etc

我遇到的问题是，它似乎在子路由器中我无法使用RouteSegment来获取用户的电子邮件。例如，在CustomerProfileComponent中，我实现OnActivate并尝试以下操作：

routerOnActivate(curr: RouteSegment) {
    let name = curr.getParam('name');
    console.log("profile says " + name);
}

但是，这个打印的配置文件显示未定义。我想这是因为：name route param不直接属于CustomerComponent，而是属于AppComponent中的Routes。

我希望能够从RouteSegment中获取每个视图的名称，然后能够使用它来访问某些api以获取有关该用户的特定数据。

我已经读过，实现它的一种方法是通过使用类似“当前用户”变量的服务来共享状态数据，并将服务注入到子路由中的所有组件中。

但是，如果我不需要跨组件以这种方式共享状态，我认为它会使应用程序更简单。

有什么方法可以从路线上得到这个名字，还是有更好的方法？

Answer 1

您需要在routeLink中添加信息，如下所示

<a [routerLink]="['./profile', profile.name ]">Profile</a>

其中profile是组件中的属性

此外，可用的网址为/profile/joe或layout/joe

Angular 2中的嵌套路由与发布候选组件路由器

1 个答案: