它们在不同的地方（声明和提供者）声明。我知道该服务将@Injectable（）注入到使用该服务的组件的构造函数中。但为什么必须这样呢？为什么我们不能在一个地方宣布？一个人可以做什么功能，另一个不能？
答案 0 :(得分：17)
<强>组件
它基本上是一个带有装饰器@Component的类，它告诉angular该类是一个组件。
它们始终与HTML模板和一些CSS相关联。
当html的一部分重复使用类似功能时，最好将其放入组件中。可以在需要相同功能的地方调用此组件。
<强>服务
它们是整个应用程序中某些常用功能的中心单元。
它们是具有函数和成员的简单类。
使用时 - 存在重复代码，访问/存储数据。
与@Component和@Directive不同，服务不存在装饰器。 @Injectable仅在组件，指令或其他服务需要使用一个服务时使用。
答案 1 :(得分：13)
我自己对Angular很新，但这是我的理解。
来自docs：
角度组件是指令的子集。与指令不同， 组件总是 有一个模板，每个模板中的元素只能实例化一个组件。
基本上，组件是一小部分HTML，CSS和Javascript，它封装了您要显示的应用程序的某些部分。
服务提供了可以在应用程序的多个部分中使用的功能。假设您想要跨多个组件显示有关用户的特定信息，但又不想重复代码，您可以将该代码放入服务中。然后，您将在组件中注入服务，并从服务中调用显示组件内的代码的用户。
如果要在正在修饰的服务中注入其他服务，则使用@Injectable（）装饰器，并且在组件中使用该服务时不需要包含它。
答案 2 :(得分：2)
“当我们想将一个组件的方法访问到另一个组件的方法时，我们必须创建对象并对其进行访问。 但， @Injectable 告诉我们或服务方法，我们只需通过在Constructor（）中注入Service即可访问。因为Service是Singleton，所以我重复Service是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' } );
}
}
欢迎您发表评论。