角度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.

正在搜索以定义每个路线的名称，但似乎该功能的所有答案报告已从角度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服务将如下所示:

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

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

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

也许使用resolve防护有点古怪，但是如果考虑到这一点，您将尝试在显示路线之前解析数据.在这种情况下，状态为data变量中的状态，因此使用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

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