Angular 2中的嵌套路由以及候选发布者组件路由器 [英] Nested Routes in Angular 2 with release candidate Component Router

问题描述

我正在构建一个简单的应用程序，使某人可以通过电子邮件以某种形式搜索用户，然后查看与该用户相关的各种数据.

I was building a simple application where someone can search for a user by email in a form and then see the various pieces of data associated with that user.

对于顶部的AppComponent组件，我有以下路线:

For the top AppComponent component I have the followings routes:

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

搜索路径对应于用于搜索客户的表单，/:name路径旨在用于显示该客户的数据.

The search path corresponds to the form to search for a customer and the /:name path is intended to be for displaying the data for that customer.

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

My idea was to have the Customer Component have some basic layout and perhaps things like a users profile picture and then have links to the different parts of a customer profile like so:

@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>

我希望这种布局能让我拥有以下网址:

I was hoping this layout would let me have urls such as:

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

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

The problem I am running into is that it seems within the child router I can't use the RouteSegment to get the users email. For example, within CustomerProfileComponent I implement OnActivate and try the following:

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

但是，这会打印配置文件显示未定义".我想这是因为:name route参数不直接属于CustomerComponent，而是属于AppComponent中的Routes.

However, this prints 'profile says undefined.' I suppose this is because :name route param doesn't belong directly to the CustomerComponent, rather it belongs to the Routes in the AppComponent.

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

I want to be able to be able to grab the name from the RouteSegment for each of these views and then be able to use that to hit some api to get specific data about that user.

我已经读过一种方法，就是拥有一个具有状态用户"变量之类的共享状态数据的服务，并将该服务注入子路由的所有组件中.

I have read that one way to do it is to have a service that shares state data by having something like a 'current user' variable and inject the service it into all the components in the child routes.

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

However, I think it would make the application simpler if I didn't need to share state in this way across components.

有什么方法可以从路线中获取名称，还是有更好的方法?

Is there any way that I can get the name from the route or is there perhaps a better approach?

推荐答案

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

You need add the information in routeLink as follows

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

配置文件是组件中的属性

Where profile is property in the component

此外，可用的URL将是/profile/joe或layout/joe

Also the URLs available will be /profile/joe or layout/joe

这篇关于Angular 2中的嵌套路由以及候选发布者组件路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！