angular - Angular 2 中的服务与类实例

Question

我是 Angular 2 的新手。我已经开始在 Angular 2 中处理服务。
我知道我们需要用 @Injectable() 来装饰这个类，使其成为如下所示的服务。

import {Injectable} from '@angular/core'
@Injectable()
export class MyFirstServiceClass{
  SayHelloToService(){
  alert('Service called');
  return 'Hello, welcome your service...';
  }
}

之后，我们从组件类的构造函数中访问它，如下所示:

import { Component } from '@angular/core';
import {MyFirstServiceClass} from './FirstService.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private  servtest : MyFirstServiceClass )
  {    
      this.title =  servtest.SayHelloToService();
  }
}

我的模板代码:

<div style="text-align:center">
  {{title}}
  <button id='btn' (click)='servtest.SayHelloToService()'>Click Me ! 
</button>
</div>

当组件创建完成时，即使在按钮单击和页面加载时，我也能够看到结果，所以没问题。

但是，我甚至可以直接访问，而无需任何类型的@injectable，只需创建该类“MyFirstServiceClass”的实例，如下所示:

export class AppComponent {
title = 'app';
 servtest = new MyFirstServiceClass();
   func1(){
   this.title= this.servtest.SayHelloToService();
   } 
}

我不明白他们俩有什么不同。

Answer 1

@Injectable()装饰器不会使类成为服务。任何类都可以是服务。它是否表现得像一个服务是由你如何注册它来定义的。如果注册在provider模块或组件的数组，它是一项服务。

  providers: [
    ProductService,
    ProductEditGuard,
    ProductParameterService
  ]

添加 @Injectable()只需要告诉一个服务它需要注入(inject)其他服务。像这样:

@Injectable()
export class ProductService {
    private productsUrl = 'api/products';
    private products: IProduct[];

    constructor(private http: HttpClient) { }

    // ...
}

在没有 @Injectable() 的情况下尝试上面的代码装饰器生成语法错误: Uncaught (in promise): Error: Can't resolve all parameters for ProductService
注意 :添加 @Injectable() 被认为是“最佳实践”每个服务的装饰器，因此如果以后的开发人员确实将服务注入(inject)到服务中，它不会产生错误。