Angular 2 - 检查当前活动路线“名称" [英] Angular 2 - Check current active route "name"

问题描述

我有一个带有多个嵌套子视图的 Angular 2 应用程序.但是它会通过多个router-outlet显示在同一页面上.

I am having an Angular 2 application with several nested children view. But it will be displayed on the same page though several router-outlet.

const routes: Routes = [
    {
        path: 'queue/:date/:offset/:type',
        component: BundleListComponent,
        resolve: {
            response: BundleListResolve
        },
        children: [
            {
                path: ':bundleId', component: PointListComponent,
                resolve: {
                    response: PointListResolve
                },
                children: [
                    {
                        path: ':pointId', component: TaskListComponent,
                        resolve: {
                            response: TaskListResolve
                        },
                        children: [
                            {
                                path: ':taskId', component: TaskDetailComponent,
                                resolve: {
                                    response: TaskDetailResolve
                                }
                            },
                            { path: '', component: EmptyComponent }
                        ]
                    },
                    { path: '', component: EmptyComponent }
                ]
            },
            { path: '', component: EmptyComponent }
        ]

    },
    {
        path: 'queue',
        component: QueueRedirectComponent
    }
}

所以基本上我可以遍历路线列表

So basically I can travel through the list of route

• /队列
• /queue/:date/:offset/:type
• /queue/:date/:offset/:type/:bundleId
• /queue/:date/:offset/:type/:bundleId/:pointId
• /queue/:date/:offset/:type/:bundleId/:pointId/:taskId

例如

#/queue/2017-01-05/480/20/57f4c26507b36e3684007b52/1/57fb0abb07b36e39d8e88df8/1

假设您有一个包含某些元素的页面:

Imagine you have a page with some element:

1. 一个 UI 部分显示了一个电影列表
2. 另一部分在单击电影列表中的项目时显示电影详细信息，但显示在同一页面上.
3. 另一部分在电影详情中点击进入角色名称时显示角色详情，也显示在同一页面上.
4. 等等...

基本上，我在查看角色详细信息时仍然可以点击进入电影列表.

Basically, I can still click into movie list while I am viewing a character detail.

正在搜索定义每条路线的名称，但似乎所有答案报告此功能已从 Angular 2 最终版本.在使用 UI 路由器的 Angular 1 中，我可以为每条路由定义名称，并且可以使用内置函数 state.is(ROUTE_NAME) 轻松获取路由.

Searching for defining the name for each route but seem all the answer report this feature has already removed from Angular 2 final. In Angular 1 using UI Router, I can define the name for each route and can get the route very easily with built-in function state.is(ROUTE_NAME).

所以我现在所做的是基于 window.location 获取 URL 并通过 / 拆分此字符串以获取参数数量.但它是更硬编码的.

So what I am doing now is base on the window.location to get the URL and splitting this string by / to get the number of parameters. But It's more hard-coded one.

有做同样事情的经验吗?如何区分当前激活的路由?

Any experience on doing the same? How I can distinguish which route is currently active?

推荐答案

我相信 Scott 的回答存在问题，他在服务的构造函数中使用了 ActivatedRoute.此路线不会更新.

I believe there is an issue with Scott's answer where he uses the ActivatedRoute inside the constructor of the service. This route won't get updated.

我想到了另一种可能会引起您兴趣的解决方案.再次归结为在路由上使用 data 属性，但现在使用另一个解析服务:

I thought of another solution which might peek your interest. It again comes down on using the data property on the routes, but now using another resolve service:

您将需要一个像这样的 RouterConfig，其中为每个路由添加 state: StateResolve 和一个包含状态名称的数据对象:

You are going to need a RouterConfig like this, where for each route you add the state: StateResolve and a data object containing the state name:

const routes: RouterConfig = [{
    path: 'queue/:date/:offset/:type',
    component: BundleListComponent,
    resolve: {
       response: BundleListResolve,
       state: StateResolve
    },
    data: {
       state: 'Bundle'
    },
    ...
]

不要忘记将 StateResolve 服务添加到 providers 数组

您的 StateResolve 服务将如下所示:

Your StateResolve service will look something like this:

@Injectable()
export class StateResolve implements Resolve<string> {

   constructor(private stateService: StateService) {}

   resolve(route: ActivatedRouteSnapshot): string {
       let state: string = route.data['state']
       this.stateService.setState(state);
       return state;
   }
}

显然你需要一个 StateService ，它有 setState 方法，但我想从这里开始它是不言自明的.

Obviously you will need a StateService which has the setState method, but I guess from here it's pretty self-explanatory.

也许使用 resolve 守卫有点古怪，但如果你仔细想想，你是在尝试在显示路线之前解析数据.在这种情况下，数据变量内的状态，因此使用 Resolve 访问 data 属性是有意义的

Perhaps using a resolve guard is a bit eccentric, but if you think about it, you are trying to resolve data before you show the route. In this case, the state inside the data variable, so it does make sense to use the Resolve to access the data property

这篇关于Angular 2 - 检查当前活动路线“名称"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！