它们在不同的位置声明(声明和提供程序中)。我知道服务有@Injectalbe(),可以注入到使用该服务的组件构造函数中。但为什么必须这样做呢?为什么不能只在一个地方声明?一个能做到的功能另一个不能吗?
它们在不同的位置声明(声明和提供程序中)。我知道服务有@Injectalbe(),可以注入到使用该服务的组件构造函数中。但为什么必须这样做呢?为什么不能只在一个地方声明?一个能做到的功能另一个不能吗?
组件
它基本上是一个带有装饰器 @Component 的类,告诉 Angular 这个类是一个组件。
它们总是与一个 HTML 模板和一些 CSS 相关联。
当一个部分的 html 具有类似功能时,最好将其放入组件中。此组件可在任何需要相同功能的地方调用。
服务
它们是跨应用程序的一些常见功能的中心单元。
它们是带有函数和成员的简单类。
当存在代码重复、访问/存储数据时使用。
与 @Component 和 @Directive 不同,服务没有装饰器。@Injectable 仅在一个服务需要被组件、指令或另一个服务使用时使用。
我自己对Angular还比较新,但是这是我的理解:
来自文档:
Angular的组件是指令的一个子集。与指令不同,组件总是有一个模板,并且每个元素在模板中只能实例化一个组件。
基本上,组件是一小段HTML、CSS和JavaScript代码,用于封装您想要显示的应用程序的某些部分。
服务提供了可以跨应用程序多个部分使用的功能。假设您想要在多个组件中显示有关某个用户的特定信息,但不想重复编写代码,您可以将该代码放入服务中。然后,在组件中注入该服务并从服务中调用用户显示代码。
@Injectable()装饰器用于在被装饰的服务中注入其他服务,而当您在组件中使用服务时,无需包含它。
当我们想要在一个组件中访问另一个组件的方法时,我们必须创建对象并进行访问。但是@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' } );
}
}