【问题标题】：What's the difference between Service and Component in Angular 2+?Angular 2+中的服务和组件有什么区别？
【发布时间】：2018-02-16 17:50:06
【问题描述】：

它们在不同的地方声明（声明和提供者）。我知道该服务有 @Injectable() 注入到使用该服务的组件的构造函数中。但为什么一定要这样呢？为什么不能只在一处申报？哪些功能可以做到，而另一个不能？

【问题讨论】：

标签： angular service dependency-injection components

【解决方案1】：

核心主要区别

“当我们想要将一个组件的方法访问到另一个组件时，我们必须创建对象并访问它。但， @Injectable 告诉我们或 Service 的方法，我们可以通过在 Constructor() 中注入 Service 因为 Service 是 Singleton 我重复 Service is Singleton。 即只有一个对象每个服务都可以在整个应用程序中使用。

示例： 构造函数(私有 http: HttpClient , 私有 toastService: ToastService)

在这里，我刚刚创建了 HttpClient 类型的变量并访问了 get/post/put 方法。 ToastService 是我访问我自己的服务的私人服务。

组件

希望你知道，在 AngularJS 中，我们曾经编写单独的 script.js 文件来处理事件、编写方法、调用 api 或验证，然后我们像这样在 html 中访问该文件

我们使用 @Component 作为组件。因此，组件就像脚本文件一样，添加了额外的功能。如，我们可以导出组件并在应用程序中的任何地方使用它，Angular 2 提供了面向对象的功能，而不是导入外部脚本、css 文件，它们提供了对等的支持。

    @Component( {
        selector: 'app-unit',
        templateUrl: './unit.component.html',
        styleUrls: ['./unit.component.css']
    } )

    export class MyComponent implements OnInit { 
    constructor( private http: HttpClient , private toastService: ToastService) { }

    ngOnInit() {
        this.fetchAllUnit();
    }
}

服务

我们使用 @Injectable 提供服务。服务用于跨不同组件的一些通用功能的通用方法。它们是具有函数和成员而不是 html 内容的简单类。用于 - 希望减少重复代码、访问或存储数据。

import { Injectable } from '@angular/core';

@Injectable( {
    providedIn: 'root'
} )
export class ToastService {

    constructor() { }

    public error( msg ) {

        M.toast( { html: msg, classes: 'red darken-2 rounded' } );

    }
    public success( msg ) {
        M.toast( { html: msg, classes: 'green lighten-1 rounded' } );

    }

    public warning( msg ) {

        M.toast( { html: msg, classes: 'yellow darken-4 rounded' } );

    }
}

【讨论】：

【解决方案2】：

组件

它基本上是一个带有装饰器 @Component 的类，它告诉 Angular 该类是一个组件。

它们总是与 HTML 模板和一些 CSS 相关联。

当 html 的一部分重复使用类似的功能时，最好将其放入组件中。这个组件可以在任何需要相同功能的地方调用。

服务

它们是整个应用程序中一些常见功能的中心单元。

它们是具有函数和成员的简单类。

用于 - 存在重复代码，访问/存储数据。

与@Component 和@Directive 不同，Service 不存在装饰器。 @Injectable 仅在组件、指令或其他服务需要使用一项服务时使用。

【讨论】：

【解决方案3】：

我自己对 Angular 还很陌生，但这是我的理解。

组件

来自docs：

Angular 组件是指令的子集。与指令不同，组件总是有一个模板，并且模板中的每个元素只能实例化一个组件。

基本上，组件是一小部分 HTML、CSS 和 Javascript，它封装了您想要显示的应用程序的某些部分。

服务

服务提供的功能可以跨应用程序的多个部分使用。假设您想跨多个组件显示有关用户的特定信息，但不想重复代码，您可以将该代码放入服务中。然后，您将在您的组件中注入服务，并从服务中调用显示组件内代码的用户。

@Injectable() 装饰器用于当你想在被装饰的服务中注入其他服务时使用，当你在组件中使用该服务时不需要包含它。

【讨论】：