角应用中的正确路径选择

Question

我想知道如何在我的应用程序中正确地处理路由主题。

现在的样子: app-routing.module.ts文件：

const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: '../app/modules/home.module#HomeModule'
      },
      {
        path: '',
        loadChildren: '../app/modules/products.module#ProductsModule'
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/404'
  }
];

我知道这看起来很糟。两条相同的路径：“”。但在ProductsModule中，我的路由如下所示：

products.routing.ts文件：

const routes: Routes = [
  {
    path: 'products/:id',
    component: ProductDetailsComponent
  },
  {
    path: ':mainCategory',
    component: ProductsComponent
  },
  {
    path: ':mainCategory/:subCategory',
    component: ProductsComponent
  }
];

我想做的事：

1.转到：'/products/ 12331‘之后，用id 12331加载ProductDetailsComponent。

可能它不起作用，因为主模块有路径：'‘。

该问题的解决方案是将ProductDetailsComponent与ProductsComponent分开吗？

这样，我的app-routing.module.ts就会看起来：

const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: '',
        loadChildren: '../app/modules/home.module#HomeModule'
      },
      {
        path: 'products',
        loadChildren: '../app/modules/products.module#ProductsModule'
      },
      {
        path: ':mainCategoryId',
        loadChildren: '../app/modules/products.module#CategoriesModule' (adding new module with CategoriesComponent)
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/404'
  }
];

第二个问题是，我从后端加载类别。如何解决路由到不存在的类别的问题？例如，我有几个类别：

1. 食品饮料，肉类，比萨饼
2. 服装鞋，夹克，帽子

现在如果我要去：

/食品/饮料-应该加载CategoriesComponent

/食物/鞋子-应该路线到/404，但如何处理？(类别不存在)

/随机名称/饮料-应该路由到/404

我怎么能解决这个问题？也许我的问题很愚蠢，但我学习的角度是:)

Answer 1

你问的是两个完全不同的问题，这并不理想，但我会尽力帮助你。

对于路由问题，您的第二个路由表更好，但仍然是不正确的。

对空路径使用children似乎有违目的。您还在一个带有空路径的子路由上延迟加载HomeModule。我很确定这不管用。如果home.routing.ts实际上包含子路径，只需将其移到顶层，因为不需要延迟加载这些路径。

试着重做这样的事情：

const routes: Routes = [
    {
        path: '',
        component: MainLayoutComponent,
    },
    {
        path: 'home',   // pretending this is from home.module.ts
        component: HomeComponent,
    },
    {
        path: 'products',
        loadChildren: '../app/modules/products.module#ProductsModule'
    },
    {
        path: 'categories',
        loadChildren: '../app/modules/products.module#CategoriesModule'
    },
    {
        path: '**',
        redirectTo: '/404'
    }
];

这要简单得多，而且您会遇到更少的问题来启动和运行所有的东西。我会说，:mainCategoryId作为顶级路径通常是个坏主意，除非您只有一种类型的东西。因此，将它们置于categories/:mainCategory下将更容易理解所发生的事情。

现在，对于第二个问题，您想知道如何在给定无效类别的情况下重定向到404页。因为我们更改了到categories/:mainCategory的路径，所以我们不需要担心您的/randomName/Drinks，因为它已经转到404了。对于您的其他示例，您有几种处理方法。

可能最简单的方法是检查ProductsComponent中的参数。

@Component({
    selector: 'products-component',
    templateUrl: './products-component.component.html',
    styleUrls: ['./products-component.component.scss'],
})
export class ProductsComponent {
    public category: string;
    public subCategory: string;

    constructor(private route: ActivatedRoute, private router: Router) {
        this.route.params.subscribe( params => {
            this.category = params['mainCategory'];
            this.subCategory = params['subCategory'];

            // validate categories in some way (either service, local method or something 
            if (!this.isCatValid(this.category) || !this.isCatValid(this.subCategory)) {
                this.router.navigate(['404']);
            }   
        }
    }

    this.isCatValid(category: string): boolean {
        // validate category
    }
}

或者，如果您创建了一个categoryService，您可以在任何路由之前确保预加载，并且具有调用解析，您可以使用向您的路由添加一个CanActivate路由保护。所以你的categories.routing.ts是这样的：

const routes: Routes = [
  {
    path: ':mainCategory',
    component: ProductsComponent,
    canActivate: [CanActivateCategories]
  },
  {
    path: ':mainCategory/:subCategory',
    component: ProductsComponent,
    canActivate: [CanActivateCategories]
  }
];

然后，您只需要编写一个CanActivateCategories，它验证这些参数并返回true，或者如果不有效，只返回另一个this.router.navigate(['404']);。