Angular 2-检查当前活动路由“名称”

Question

我有一个Angular 2应用程序与几个嵌套的子视图。但它将通过几个router-output显示在同一页面上。

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

null

例如：

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

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

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

因此，我现在所做的是基于window.location获得URL并通过/拆分这个字符串来获得参数的数量。但它是更硬编码的。

有做同样事情的经验吗？我如何区分哪条路由当前处于活动状态？

Answer 1

我相信Scott的答案有一个问题，他在服务的构造函数中使用了ActivatedRoute。此路由将无法更新。

我想了另一个办法，也许能看出你的兴趣。它再次出现在对路由使用data属性上,但现在使用了另一个解析服务：

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

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

@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方法，但我想从这里可以很好地说明。

也许使用resolve保护有点古怪，但如果您仔细想想，您正在尝试在显示路由之前解析数据。在本例中，是data变量内部的状态，因此使用resolve访问data属性是有意义的