angular service 和 @injectable

为什么需要服务？

官方：组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

服务是在多个“互相不知道”的类之间共享信息的好办法。

也就是，获取数据和视图展示应该相分离，获取数据的方法应该放在服务中。全局的共享数据（通用数据）及非父子组件传值、共享数据放在服务中是很好的，类似vue中的vuex。

创建服务

利用angular cli 命令创建服务

ng generate service hero 

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {
  haha = 'abc';
  constructor() { }
  ngOnInit(){
    
  }

}

使用服务

在aa.component.ts组件中使用

import { HeroService } from '../../../services/hero/hero.service';

export class AAComponent implements OnInit{
  constructor(private heroService : HeroService) {}
  ngOnInit(){
    console.log(this.heroService.haha)
  }

}

@Injectable()

在 Angular 中，要把一个类定义为服务，就要用 @Injectable()装饰器来提供元数据，以便让 Angular 把它作为依赖注入到组件中。 同样，也要使用 @Injectable()装饰器来表明一个组件或其它类（比如另一个服务、管道或 NgModule）拥有一个依赖。

@Injectable() 装饰器把这个服务类标记为依赖注入系统的参与者之一，它是每个 Angular 服务定义中的基本要素，​在未配置好 Angular 的依赖注入器时，Angular 实际上无法将它注入到任何位置。@Injectable() 装饰器具有一个名叫 providedIn的元数据选项，providedIn设置为'root'，即根组件中，那么该服务就可以在整个应用程序中使用了。

providedIn提供这些值：‘root' 、'platform' 、'any' 、null。

对于要用到的任何服务，你必须至少注册一个提供者。服务可以在自己的元数据中把自己注册为提供者，这样可以让自己随处可用。或者，你也可以为特定的模块或组件注册提供者。要注册提供者，就要在服务的 @Injectable() 装饰器中提供它的元数据，或者在@NgModule() 或 @Component()的元数据中。即可以使用不同层级的提供者来配置注入器，也表示该服务的作用范围。

在服务本身的 @Injectable() 装饰器中。（angluar创建服务默认采用的方式）

在 NgModule 的 @NgModule() 装饰器中。 （该服务只在某服务中使用）

在组件的 @Component() 装饰器中。（该服务在某组件中使用）

在模块中使用

import { HeroService } from './services/hero/hero.service';
@NgModule({
  providers: [HeroService],
})

在组件中使用

import { HeroService } from '../../../services/hero/hero.service';
@Component({
    selector: 'index-app',
    templateUrl: 'app/templates/app.html',
    styleUrls: ['./index.component.less'],
    providers: [
        HeroService
    ]
})

export class IndexComponent implements OnInit{
  constructor(private heroService : HeroService) {}
  ngOnInit(){
    
  }

}

在组件中提供服务时，还可以使用viewProdivers，providers和viewProviders有区别，viewProviders对子组件树不可见

详细原理：

https://angular.cn/guide/hierarchical-dependency-injection

https://angular.cn/guide/architecture-services

https://angular.cn/tutorial/toh-pt4

https://www.cnblogs.com/huangenai/p/12214806.html

https://blog.tcs-y.com/2020/03/22/ng2-serivce/