让我们开发一个 Angular 应用程序 – 创建一个 Angular 服务来访问自行车详细信息
这是我的“让我们开发一个 Angular 应用程序”系列文章的第 10 篇文章。
到目前为止，我们已经创建了一个 Angular 应用程序和一些组件，为我们的 Bike 实体创建了一个模型类，并创建了一组硬编码的 Bike 细节。然后，我们使用 ngFor 显示了硬编码数组中的自行车详细信息。此外，我们还安装并应用了一些bootstrap classes 来改进 UI。我们还创建了一个带有虚拟菜单的导航栏。
单击每个自行车图块时，我们会在bike-details组件中显示自行车详细信息。
目前，我们的自行车租赁门户应用程序如下图所示。
请阅读我以前的文章以了解我们的应用程序。
要阅读上一篇文章，请单击此处 >> 在bike details组件中显示bike 详细信息
接下来，我们将在我们的应用程序中实现 Angular 服务。
我们将创建一个名为“DataService”的 Angular 服务。该服务的目的是管理bike数据。
我们现在不打算从任何 API 访问数据。我们稍后会这样做。
我们要将硬编码的自行车详细信息数组从应用程序组件移动到 DataService，并将 DataService 注入应用程序组件以访问自行车详细信息数组。
简而言之，我们可以将今天的工作项目列出如下。
- 创建一个 Angular 服务“DataService”
- 将自行车详情数组从 App 组件移动到 DataService
- 使用依赖注入从 App 组件访问 DataService 中的自行车详细信息数组。
什么是 Angular 服务？
根据 Angular 风格指南，我们应该将组件中的逻辑限制为视图所需的逻辑。所有其他逻辑都应委托给服务。
Angular 服务是跨组件共享的可重用功能。
基本上，它只是一个带有 @Injectable() 装饰器的类。
例如，我们可以使用以下代码创建 a=Angular 服务。
@Injectable()
export class TestService
{
} 然后，我们应该在 Angular 依赖注入系统中提供一个服务实例。
为此，我们可以使用模块文件中的 Provider 数组。
在 Provider 数组中提供服务类名称将使角度依赖注入系统知道其他组件或服务可能会请求服务的实例。
关于 Angular 服务的重要一点是，它是单例的。单个实例在所有组件之间共享。
一旦创建了第一个实例，Angular 依赖注入系统将缓存它并将相同的实例传递给所有组件。
可以在以下情况下创建服务：
- 视图不需要该功能
- 需要跨多个组件共享逻辑
- 需要跨多个组件共享数据
将服务提供到 Angular 依赖注入系统中
有两种方法可以在依赖注入系统中提供Angular 服务。
- 在模块文件中使用 provider[] 数组。
例如：provider:[DataService] – 这里的 ‘DataService’ 是类的名称
- @Injectable() 装饰器内部
例如，
@Injectable({ ProvidedIn: ‘root’ })
从 Angular 6 开始，第二种方法是可取的。
第二种方法的主要优点是“Tree Shakable”——即，如果该服务没有被任何组件或服务使用，那么该服务将从代码库中删除。所以应用程序只包含我们的应用程序运行所需的代码。
Angular 6 中引入了 Tree shakable 功能。
为我们的应用程序创建数据服务
我们可以使用 Angular cli 创建 Angular 服务。
下面给出了创建Angular 服务的 cli 命令。
ng generate service <Service-Name>我们也可以使用简写命令。
ng g s <Service-Name>例如：ng g s Data
通过执行上述命令，angular cli 将创建一个名为 ‘data.service.ts’ 的 ts 文件
在这个文件中，我们可以找到一个带有 @Injectable 装饰器的名为“DataService”的类。
请参考下面的截图：
在这里，我在“services”文件夹中创建服务。
请参考下面截图中的 data.service.ts 内容
正如我们在 @Injectable() 装饰器中看到的那样，默认情况下，Angular 使用tree shaking提供程序将服务注册到根注入器。
什么是注射器？
在这里，我们创建了一个名为 DataService 的类。此类提供服务。
@Injectable ()装饰器会将其标记为可以注入其他组件的服务。
但是，在我们为服务提供者配置 Angular 依赖注入器之前，Angular 无法在任何地方注入服务。
注入器负责创建服务实例并将它们注入到组件类中。Angular 在执行应用程序时为我们创建注入器，并且在引导过程中创建根注入器。
我认为这对 Angular 服务来说已经足够了。
让我们转到我们的项目
由于我们已经使用 Angular cli 创建了数据服务，因此我们创建了第一个操作项
我们的下一个操作项是将bikeList 数组从应用程序组件移动到数据服务。
将自行车详细信息数组从应用程序组件复制到 DataService 类。
然后创建方法 ‘getAllBikes()’ 以返回 bikeList 数组。
请参阅下面的屏幕截图。
我们创建了一个 Angular 服务并在其中创建了一个方法来返回一个元素数组。
我们的第二个行动项目也完成了！
接下来，我们需要对 AppComponent 类进行更改以访问数据服务。
变化是，
- 实现 OnInit 接口
- 删除数组元素——我们将使用数据服务访问自行车列表数组
- 使用“Constructor Injection”将 DataService 注入 AppComponent 类
- 调用 DataService 中的 getAllBikes() 方法并将自行车详细信息列表分配给局部变量“bikeList”
请参阅屏幕截图以清楚了解更改。
我们已将 DataServie 注入到我们的应用程序组件中，并通过调用 getAllBikes() 方法从 DataService 检索自行车详细信息数组。
检查浏览器，我们会得到和以前一样的结果。
结论
在本文中，我解释 Angular 服务及其实现。
我们已经创建了服务并将服务注入到 AppComponent 中。
在我的下一篇文章中，我们将了解如何添加新的自行车详细信息。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
