Angular2 +路由-可选的路由参数

Question

所以我有这样的路线/category/tech，并/category/tech/new与/category/tech/old等

他们都用 ItemsComponent

因此，有什么方法可以像在ExpressJS中那样用可选的参数定义这些类型的路由。

router.get('/category/tech/:filter?', (req, res) => ...

（在这里/category/tech和/category/tech/xxx都会工作）

还是我必须像这样分别定义它们

{path: 'users', component: ItemsComponent},
{path: 'users/:filter', component: ItemsComponent}

Answer 1

因此，有什么方法可以像在ExpressJS中那样用可选的参数定义这些类型的路由。

简单的答案是：否，您必须为每个单独的路径定义新的路由。

{path: 'users', component: ItemsComponent},
{path: 'users/:filter', component: ItemsComponent}

尽管您可以验证路径并确定，但component使用路由后的路径中是否具有可选参数ActivatedRoute。

Answer 2

截至目前，Angular 不允许您定义可选参数。因此，您的解决方案是添加多个相似的路由——所有路由都指向同一个组件。但这里有一件重要的事情需要注意。如果component: ItemsComponent在两个路由中都使用目标，由于路由不同，组件将被重新实例化！- 根据您的项目，这可能会很昂贵。如果您不想为每个路由重新实例化组件，请redirect改用。在这种情况下，Angular 确保组件仅被实例化一次。

{path: 'users', redirectTo: 'users/'},
{path: 'users/:filter', component: ItemsComponent}

希望这可以帮助！