Question

我在Angular2 beta 11中遇到路由和查询参数问题。

我已经通过三个组件实现了嵌套路由。基本URL如下所示：

http://localhost:3000/dashboard/settings/administrative/

添加查询参数后，它似乎是正确的，如下所示：

http://localhost:3000/dashboard/settings/administrative/;company=1

当用户刷新页面或将URL复制并粘贴到另一个选项卡时，会出现问题。然后URL以这种方式显示：

http://localhost:3000/dashboard/settings/administrative;company=1/;company=1

下一次刷新会导致URL为：

http://localhost:3000/dashboard/settings;company=1/administrative;company=1/;company=1

正如您所看到的，每次刷新查询都会将params重写为父状态，对我来说是一种不受欢迎的行为。在我看来，它们应该只出现在它们被分配到的路线旁边。

走向实施的方式。我的应用程序的根组件定义了Dashboard的以下路由：

@RouteConfig([
    {
        path: '/dashboard/...',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    }
])

然后我有一个DashboardComponent，后面有RouteConfig：

@RouteConfig([
    {
        path: '/settings/...',
        name: 'Settings',
        component: SettingsComponent,
        useAsDefault: true
    }
])

进一步SettingsComponent以这种方式定义子路由AdministrativeRoot：

@RouteConfig([
    {
        path: '/administrative/...',
        name: 'AdministrativeRoot',
        component: AdministrativeRootComponent,
        useAsDefault: true
    }
])

AdministrativeRootComponent充当所有其他路由的包装器，涉及系统的管理设置，其RouteConfig如下：

@RouteConfig([
    {
        path: '/',
        name: 'Administrative',
        component: AdministrativeComponent,
        useAsDefault: true
    }, {
        path: '/branch/:id',
        name: 'ManageBranch',
        component: ManageBranchComponent
    }, {
        path: '/reception/:id',
        name: 'ManageReception',
        component: ManageReceptionComponent
    }, {
        path: '/room/:id',
        name: 'ManageRoom',
        component: ManageRoomComponent
    }
])

最后，我使用以下代码导航到带有查询参数的Administrative路径：

this._router.navigate([
    'Administrative', {
        company: this._selectedCompanyId
    }
]);

您如何看待这种情况，我是否在实施中出错或者您认为这是一种理想的行为？你有这样的问题吗？

更具体地说，我的项目基于AngularClass提供的angular2-webpack-starter。也许问题与webpack配置有关？

我正在与此斗争几天，所以我将非常感谢您的回答，也许是一个解决方案。

编辑：25.03.2016

我在plunkr上发布了简化演示：http://plnkr.co/edit/8qRa3YJ1AdPjfFyvzk3X?p=preview

Angular2路由器查询参数 - 在刷新时复制

0 个答案: