在使用 Angular 2 开发单页应用时，经常遇到需要根据用户输入或者其它条件动态修改路由参数的需求。但是默认情况下，修改路由参数会导致整个页面重新加载，这不仅影响用户体验，还可能导致数据丢失。本文将介绍如何在 Angular 2 中实现不刷新页面即可修改路由参数的方法。
在路由模块中定义参数
首先，在定义路由时需要明确指定需要传递的参数。例如，在以下路由配置中，我们定义了一个名为 id 的参数：
const routes: Routes = [
{ path: 'product/:id', component: ProductComponent }
];使用 ActivatedRoute 服务获取参数
在组件中，可以通过注入 ActivatedRoute 服务来获取当前路由参数。例如，在 ProductComponent 组件中，我们可以这样获取 id 参数：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- ---------- ------ -
--- -------
------------------- ------ --------------- - -
---------- -
---------------------------------- -- -
------- - -------------
---
-
-在 ngOnInit 方法中，我们通过 route.params 订阅了路由参数的变化，并将新值赋给了 id 属性。
修改参数并不刷新页面
现在，我们来看如何修改路由参数而不刷新页面。在 Angular 2 中，可以通过 Router 服务的 navigate 方法来导航到新的 URL。例如，在 ProductComponent 组件中，我们可以这样修改 id 参数：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- ------ - ---- ------------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- ---------- ------ -
--- -------
------------------- ------ --------------- ------- ------- ------- - -
---------- -
---------------------------------- -- -
------- - -------------
---
-
--------------- ------- -
--------------------------------- --------
-
-在 changeId 方法中，我们调用了 router.navigate 方法，并传入了一个包含新的 id 值的数组。这将导航到新的 URL，并更新路由参数，但不会刷新整个页面。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- ------ - ---- ------------------
------------
--------- --------------
------------ ---------------------------
---------- ---------------------------
--
------ ----- ---------------- ---------- ------ -
--- -------
------------------- ------ --------------- ------- ------- ------- - -
---------- -
---------------------------------- -- -
------- - -------------
---
-
--------------- ------- -
--------------------------------- --------
-
-<p>Current ID: {{ id }}</p>
<input type="text" [(ngModel)]="newId">
<button (click)="changeId(newId)">Change ID</button>结论
通过 Router 服务的 navigate 方法，我们可以在不刷新页面的情况下修改路由参数。这将提高用户体验，并避免不必要的数据丢失。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28957