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() { }
}