Question

我正在尝试根据用户的地理位置定义我的路由部分。

上下文：我有一个产品库，我想通过将用户重定向到相应的路径来推广基于用户区域的一些产品。

示例：

无法检测：商店/产品/
波尔多：商店/波尔多/产品/
巴黎：商店/巴黎/产品/
产品详细信息：这是令人困惑的部分，目前没有地理定位部分，我正在使用 store / products /：id 但现在我应该在产品详细信息页面中添加地理位置，因为基本上，它仍然是同一个产品，只有一个区域的一些类别字段

问题：在执行此任务之前，我有一个类别列表导致与当前任务发生冲突，因为类别和地理位置位于路径中的相同位置

示例：

A类： store / categorya / 将显示此类别中的所有产品A

当前路径设置

{
    path: 'store',
    component: StoreAppComponent,
    children: [
        { path: 'products/:id/', component: ProductComponent, outlet: 'store' },
        { path: 'products/', component: ProductsComponent, outlet: 'store' },
        { path: ':category', component: StoreComponent, outlet: 'store' },
        { path: '', component: StoreComponent, outlet: 'store' }
    ]
}

那么我如何定义可以将类别，地理位置与Angular 4结合起来的新路线，你能建议这种方法吗？

Answer 1

首先，此代码块可能存在一些错误，因此请在使用之前对其进行测试。

这里使用的想法是使用公共子路由对象来解决3个场景 -

默认路线（默认地区和类别）/store/*

区域特定路线（默认类别）/store/:region/*

区域和类别特定路线/store/:region/:category/*

编辑：这里重要的是:route wild card。它必须在最后注册，以确保它不会覆盖任何硬编码路由。

实施可能是这样的 -

//Reusable Products Route
export const Productroutes: Route = {
    path: 'products',
    redirectTo: "products/list",
    children: [
        {
            path: "list",
            component: ProductListComponent,
        },
        {
            path: ":id",
            component: ProductComponent,
        }
    ]
}

export const routes: Route = {
    path: 'store',
    component: StoreAppComponent,
    children: [
        {
            path: "",
            redirectTo: "sotre/products",
            //products CRUD will follow store/* routes without region and category default
            children: [Productroutes]
        },
        {
            path: ":region",
            redirectTo: "sotre/:region/products",
            //products CRUD will follow store/* routes with a region and default category route
            children: [
                Productroutes,
                {
                    path: ":category",
                    //products CRUD will follow store/* routes with a region and a category route.
                    redirectTo: "sotre/:region/:category/products",
                    children: [Productroutes]
                }
            ]
        }
    ]
}

如果您的要求不同，请告诉我们。）

在Angular 4中基于地理定位的路由

1 个答案: