脚本宝典收集整理的这篇文章主要介绍了Angular service的单例模式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
问题描述
前台在的菜单，需要向后台进行请求，但是这样就造成每次点击一个菜单都会重新请求，造成菜单会出现短暂闪烁的情况，所以考虑使用service的单例模式来解决这个问题。
service 单例模式
在Angularjs中，service默认都是单例的，但是在angular中，取消了这种默认。虽然我们说单例模式是好的，但是很多时候我们真的需要service是单例的吗？
比如我们经常使用的表格，大部分情况下，我们只是需要将信息展示出来，并不需要使用service对其进行缓存，因为它不会被别的模块所使用。
那么，在angular中如何使service为单例的呢？
实现
其实，在angular6之前，如何我们想声明一个service供全局使用，是这样设置的：
服务：@H_406_37@
export class testService { }根模块：
@NgModule({
declarations: [...],
PRoviders: [TestService],
bootstrap: [Appcomponent]
})
export class AppModule {}我们需要在@NgModule中去声明providers，将service共全局使用，成为单例。
但是从angular6开始，单例模式又变成了一个首选方式。
所以，只要我们使用angular-cli的命令创建service的时候，就会默认创建如下部分：
@Injectable({
providedIn: 'root',
})这时，就声明该service在整个项目的模块下是单例的了。
当然，此时使用原来在@NgModule中providers的方式也是可以的。
我的应用
我的目的是避免重复请求后台，所以基本思路就是在一次请求后台之后，将请求结果交给service保管，然后，然后下次请求就直接获取service中的数据就可以了。
@Injectable({
providedIn: 'root',
})
export class MenuService {
private baseUrl = 'menu';
private currentMenuList: Array<;menu>; // 这里存储所有的菜单
constructor(private http: HttpClient) {
}
/**
* 请求后台，获取所有菜单
*/
getAll() {
return this.http.get<Menu[]>(this.baseUrl);
}
/**
* 设置当前菜单列表
* @param menuList 菜单列表
*/
setMenuList(menuList: Array<Menu>) {
this.currentMenuList = menuList;
}
/**
* 获取当前菜单列表
*/
getMenuList() {
return this.currentMenuList;
}
}export class LeftControlComponent implements OnInit {
menuList: Menu[]; // 菜单
constructor(private userService: UserService,
private menuService: MenuService) {
}
ngOnInit() {
this.initMenu();
}
/**
* 初始化菜单
*/
initMenu() {
// 当前菜单为空的时候，重新请求菜单
if (!this.menuService.getMenuList() || this.menuService.getMenuList().length === 0) {
this.userService.getCurrentLoginUser()
.subscribe((data: User) => {
this.menuList = data.role.menuList;
// 将获取的菜单交由service保存
this.menuService.setMenuList(this.menuList);
}, () => console.log('network error!'));
} else {
// 直接使用保存的菜单
this.menuList = this.menuService.getMenuList();
}
}
}这样，只用在登录进行系统的时候获取一次菜单，后面都不用进行向后台的请求了。闪烁的问题也就消失了。
相关参考：
https://segmentfault.com/a/11...
https://angular.cn/guide/sing...
以上是脚本宝典为你收集整理的Angular service的单例模式全部内容，希望文章能够帮你解决Angular service的单例模式所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。