在 Angular 2 中，路由参数是一种非常有用的功能。路由参数可以让我们根据不同的 URL 显示不同的内容，而这些参数可以从 URL 中提取出来。在某些情况下，我们可能需要一些可选的参数，这就是本文将要介绍的 "可选路由参数"。
什么是可选路由参数？
可选路由参数是指在定义路由时，我们允许某些参数不是必需的。比如说，我们有一个产品列表页，如果用户想筛选特定类型的产品，他们可以点击页面上的筛选按钮，这时候我们就可以使用可选路由参数来实现这个功能。
如何定义可选路由参数？
我们可以通过在路由路径中添加问号来定义可选参数，例如：
----- ------- ------ - - - ----- --------------- ---------- -------------------- -- - ----- ------------------------- ---------- -------------------- - --
在上面的代码片段中，我们定义了两个路由规则。第一个路由规则是没有参数的，表示显示所有产品；第二个路由规则包含了一个可选参数 category，这个参数可以是任何字符串类型。
如何使用可选路由参数？
当我们定义了可选路由参数后，我们可以在组件中使用 ActivatedRoute 服务来获取这个参数。例如，在 ProductListComponent 组件中，我们可以这样获取这个参数：
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
--------- ------ - ----------
------------------- ------ --------------- --
----------- ---- -
------------- - ---------------------------------------------
-
-上面的代码中，我们使用 ActivatedRoute 的 snapshot 属性来获取可选的路由参数。如果当前 URL 不包含 category 参数，this.category 将会是 undefined。
示例代码
下面的示例代码演示了如何在 Angular 2 中使用可选路由参数。
------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - -------------------- - ---- ---------------------------------------- ----- ------- ------ - - - ----- --------------- ---------- -------------------- -- - ----- ------------------------- ---------- -------------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- -------------------- ---------- ------ -
--------- ------ - ----------
------------------- ------ --------------- --
----------- ---- -
------------- - ---------------------------------------------
-
------------ --------- ------------ -- -------- ------
总结
在本文中，我们介绍了 Angular 2 中的可选路由参数。通过使用可选路由参数，我们可以让用户根据自己的需求筛选数据。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25238