Angular 什么'；角2&x2B；中服务和组件的区别是什么；？

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

我对自己来说是相当陌生的，但这是我的理解

组成部分 从：

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

基本上，组件是HTML、CSS和Javascript的一小块，封装了应用程序中要显示的部分

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

---

@Injectable（）decorator用于在被修饰的服务中插入其他服务，并且在组件中使用服务时不需要包含它。

组件

它基本上是一个带有decorator@Component的类，它告诉angular该类是一个组件

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

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

服务

它们是应用程序中某些常见功能的中心单元

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

当-存在代码重复时使用，访问/存储数据

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

核心主要区别 “当我们想要将一个组件的方法访问到另一个组件时，我们必须创建对象并访问它。 但是 @Injectable告诉我们，只要在构造函数（）中注入服务，我们就可以访问服务的方法。因为服务是单例的，所以我重复服务是单例的。也就是说，在整个应用程序中，每个服务只有一个对象可用

例如： 构造函数（私有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' } );

    }
}