angular数据共享


angular 单例

默认情况下,Angular CLI 命令 ng generate service 会通过给 @Injectable() 装饰器添加 providedIn: 'root' 元数据的形式,用根注入器将你的服务注册成为提供者。

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

@Injectable({
providedIn: 'root',
})
export class HeroService {

constructor() { }

}

当你在顶层提供该服务时,Angular 就会为 HeroService 创建一个单一的、共享的实例,并把它注入到任何想要它的类上。

在 @Injectable 元数据中注册该提供者,还能允许 Angular 通过移除那些完全没有用过的服务来进行优化。

 

缺点

Service 比较灵活,可以存放数据,但是数据是公开出去的,难免会不轻易间就在组件中直接操作 Service 中的数据了

实践: https://angular.cn/tutorial/toh-pt4#show-messages

angular 多例

在组件树的同一个级别上,有时需要一个服务的多个实例。

每个组件都需要该服务的单独实例。 每个服务有自己的工作状态,与其它组件的服务和状态隔离。这叫做沙箱化,因为每个服务和组件实例都在自己的沙箱里运行。

通过在自己的元数据(metadata)providers 数组里面列出Service, 这样每个 Component 就能拥有自己独立的Service 实例了

@Component({
  selector: 'app-hero',
  template: ``,
  providers: [HeroService]
})

export class HeroComponent implements OnInit  {

  constructor(private heroSvc: HeroService) { }

  ngOnInit() {  }

}