Angular 2+中Service和Component的区别是什么？

Question

它们在不同的位置声明（声明和提供程序中）。我知道服务有@Injectalbe()，可以注入到使用该服务的组件构造函数中。但为什么必须这样做呢？为什么不能只在一个地方声明？一个能做到的功能另一个不能吗？

- ForcedFakeLaugh

Answer 1

组件

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

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

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

服务

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

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

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

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

- Ravi Sankar Rao

Answer 2

我自己对Angular还比较新，但是这是我的理解：

组件

来自文档：

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

基本上，组件是一小段HTML、CSS和JavaScript代码，用于封装您想要显示的应用程序的某些部分。

服务

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

@Injectable（）装饰器用于在被装饰的服务中注入其他服务，而当您在组件中使用服务时，无需包含它。

- tylerwgrass

Answer 3

核心主要区别

当我们想要在一个组件中访问另一个组件的方法时，我们必须创建对象并进行访问。但是@Injectable告诉我们或者说Service的方法可以通过构造函数注入来访问。因为Service是单例，我重复说明Service是单例。也就是说，每个服务只有一个对象在整个应用程序中可用。

例如： constructor( private http: HttpClient , private toastService: ToastService)

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

组件

希望你知道，在AngularJS中，我们通常编写单独的script.js文件来处理事件、编写方法、调用API或验证，然后在html中访问该文件，例如： <script src="script.js"></script> 我们使用@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' } );

    }
}

- Deva