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

Question

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

Answer 1

Component

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

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

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

服务

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

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

[在以下情况下使用-存在重复代码，访问/存储数据。

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

Answer 2

我对Angular相当陌生，但这是我的理解。

组件

从docs：

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

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

服务

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

@ Injectable（）装饰器在想要将其他服务注入正在装饰的服务中时使用，并且在组件中使用该服务时不需要将其包括在内。

Answer 3

核心主要区别

“当我们想将一个组件的方法访问到另一个组件的方法时，我们必须创建对象并对其进行访问。但，@@ Injectable告诉我们或我们可以仅通过在Constructor（）中注入Service即可访问的Service方法。应用。 示例：

constructor（私有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' } );

    }
}

欢迎您发表评论。