Angular 2+是一个非常强大且流行的前端框架，它提供了很多便利的功能来帮助我们开发Web应用程序。其中，路由是Angular 2+框架中非常重要的一部分，用于处理对不同组件的导航。
但是，有时候我们会遇到一个问题，即如何在路由之间共享数据，尤其是在不同组件之间。
使用 Service
在Angular 2+中，我们可以使用Service来共享数据。Service是一个普通的类，我们可以在Service类中定义一些公共的变量和函数，并在应用程序中的其他组件中使用Service实例来共享这些变量和函数。
步骤如下：
- 创建 Service 类
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
public data: any = {}; //定义公共变量
constructor() { }
}我们定义一个DataService类，并使用@Injectable()装饰器来告诉Angular，这个类可以注入到其他组件中。
- 注册 Service
在应用程序的NgModule中注册该DataService。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ----------- - ---- -----------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- -------------- -- -- -------
---------- --------------
--
------ ----- --------- - -- 在组件中注入 Service
现在，我们可以在需要共享数据的组件中注入DataService并使用它。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- --------------------
--------- -
------------- --------
------- ----------------------------- -------------
-
--
------ ----- --------------------- -
------------------- ------------ ------------ - -
------------ -
--------------------- - - ----- -------- ---- -------- - --
-
-在ComponentOneComponent中，我们可以在构造函数中注入DataService，并更改DataService中的数据。
- 在其他组件中使用 Service
现在，我们可以在其他组件中使用DataService中的数据。例如，在第二个组件中，我们可以使用DataService的数据。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- -------------------- --------- - ------------- -------- ----------------------- - ------------ - -- ------ ----- --------------------- - ------------------ ------------ ------------ - - -
我们可以在ComponentTwoComponent中注入DataService，并显示其数据。
示例代码
上述使用Service来实现路由间数据分享的示例代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - --------- - ---- ----------------
------ - ------------- ------ - ---- ------------------
------ - ------------ - ---- ------------------
------ - --------------------- - ---- ----------------------------
------ - --------------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
-- ----
----- ---------- ------ - -
- ----- --------------- ---------- --------------------- --
- ----- --------------- ---------- --------------------- -
--
-- -- -------
-----------
-------- ----------------------------------
---------- --------------
-------- --------------
--
------ ----- ---------------- - -
------------
--------- --------------------
--------- -
------------- --------
------- ----------------------------- -------------
-
--
------ ----- --------------------- -
------------------- ------------ ------------ - -
------------ -
--------------------- - - ----- -------- ---- -------- - --
-
-
------------
--------- --------------------
--------- -
------------- --------
----------------------- - ------------
-
--
------ ----- --------------------- -
------------------ ------------ ------------ - -
-
-------------
------ ----- ----------- -
------ ----- --- - ---
------------- - -
-
-----------
------------- -
-------------
----------------------
---------------------
--
-------- -
--------------
----------------
--
---------- --------------
---------- --------------
--
------ ----- --------- - -总结
在Angular 2+中，使用Service来在路由之间共享数据非常简单。我们只需要定义一个Service类，注册该类，并在需要共享数据的组件中注入该Service即可。
这种方法非常适合大型应用程序，因为它可以帮助我们将逻辑分离并优化代码。同时，使用Service还可以保持应用程序中的数据的一致性，并避免重复的数据请求。
希望这篇文章对你在开发Angular 2+ 应用程序时帮到了你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc747a5ad90b6d04287b5b