Angular2+路由-可选路由参数

14 浏览
0 Comments

Angular2+路由-可选路由参数

所以我有类似于/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}

0

2 答案

0 Comments

Angular目前不允许定义可选参数。因此，解决方案是添加多个类似的路由-都指向同一个组件。但是需要注意的是，如果在两个路由中都使用component：ItemsComponent作为目标，由于路由不同，组件将被重新实例化！-这可能会根据您的项目而产生费用。如果您不想为每个路由重新实例化组件，请改用redirect。在这种情况下，Angular确保组件只实例化一次。

{path: 'users', redirectTo: 'users/'},

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

希望这对你有所帮助！

0
0 Comments

在Angular2+中，如果想要定义可选参数的路由，类似于在ExpressJS中的用法，是否有任何方法可以实现呢？简单的回答是不行，你必须为每个单独的路径定义新的路由。

虽然如此，你可以使用ActivatedRoute在路由的组件中验证路径并确定是否有可选参数。

解决方法：需要为每个可能的路径定义一个新的路由，然后在组件中使用ActivatedRoute来验证路径并确定是否有可选参数。

代码示例：

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

以上是两个路由的定义，第一个路由是没有可选参数的，第二个路由是有可选参数的。在ItemsComponent组件中，可以使用ActivatedRoute来获取路由参数，并根据参数的有无进行相应的处理。

0