angular的状态管理

刺骨的言语ヽ痛彻心扉 2022-12-01 05:29 71阅读 0赞

**Angular 真的需要状态管理么？**

> 前端在过去很多年压根就没有听说过状态管理这东西，即使在 Angular.js 火热的那几年也很少有人谈前端的状态管理，直到 React 的出现，各种状态管理框架 Flux，Redux，Mobx, … 层出不穷，让人眼花缭乱。如果你是一个 Angular 的开发者，貌似没有状态管理框架也可以正常的组件化开发，并没有发现缺什么东西。那么在 Angular 中如何优雅的管理前端状态呢？

> 首先前端组件化开发已经变成了标准，对于他的好处和概念网上有很多文章介绍，目前三大框架都是遵循组件化开发的思想，而且组件之间的通信基本都是单向数据流，就是说父组件通过属性绑定把数据传递给子组件，子组件想要修改传入的数据必须通过事件回调和父组件通信，React 中如果组件的层级比较深，同时父组件与很远的一个子组件之间需要共享数据，那就意味着数据会从父组件一层层往下传递，如果底层的组件需要修改数据，必须通过事件层层返回，这对于开发来说基本是灾难，代码变得难以维护，记得听说过一句很有哲学的话：任何解决不了的问题都可以引入一个第三方去解决，没错， 引入一个第三方存放维护这些状态，组件直接读取第三方把需要的状态展示在视图上，那么怎么样合理的设计这个第三方呢，那么 Flux，Redux，Mobx 这些状态管理类库基本都是所谓的第三方。

**那么在 Angular 中为啥不是必须要状态管理框架呢？**

> 首先在 Angular 中有个 Service的概念，虽然 Angular 对于 Service 基本上什么都没有做，连一个基类 BaseService 都没有提供，但是以下2个特性决定了在 Angular 中会很轻松的通过 Service 实现一个上述的第三方。

> 首先在 Angular 中有个 Service的概念，虽然 Angular 对于 Service 基本上什么都没有做，连一个基类 BaseService 都没有提供，但是以下2个特性决定了在 Angular 中会很轻松的通过 Service 实现一个上述的第三方。  
> 1.Angular 中定义了一个 Service 后可以通过依赖注入很轻松的把这个服务注入到组件中，这样组件就可以调用 Service 提供的各种方法；  
> 2.我们可以把组件需要的状态数据存储在 Service 中，然后把注入的 Service 设成 public，这样在模版中可以直接通过表达式绑定 Service 中的数据 。

angular使用service，依赖注入实现`全局数据管理`

`user.service.ts`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]

`user.model.ts`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]  
**调用**  
`login.component.ts`

import {  Component, OnInit } from '@angular/core';
    import {  Router } from '@angular/router';
    import {  LoginService } from './login.service';
    import {  UserInfo } from '../shared/model/user.model';
    import {  UserService } from '../shared/service/user.service';
    
    @Component({ 
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss']
    })
    export class LoginComponent implements OnInit { 
      constructor(
        private router: Router, private service: LoginService, private userService: UserService,
      ) {  }
    
      ngOnInit() { 
      }
    
      fakeLogin(){ 
        // 赋值
        const userInfo = new UserInfo();
        userInfo.roles = ['派'];
        userInfo.username = '张';
        this.userService.userInfo = userInfo;
        switch (userInfo.roles[0]) { 
          case '':
    
            break;
          case '':
    
            break;
          case '':
          
            break;
          default:
            break;
        }
      }
    
      test(){ 
        // 取值
        this.userid = this.userService.userInfo.userid;
      }
    }

下面这个博客里的方法类似。  
自己封装的全局数据管理 model.ts  
[https://github.com/mcx2020/accounting/commit/749197694afbdade29be024d3fb9366f9dde1bf7][https_github.com_mcx2020_accounting_commit_749197694afbdade29be024d3fb9366f9dde1bf7]

**前文内容引用知乎`徐海峰`**  
[Angular 真的需要状态管理么？ - 知乎 https://zhuanlan.zhihu.com/p/45121775][Angular _ - _ https_zhuanlan.zhihu.com_p_45121775]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c391e3a84f5f4f42a4cffa547cb41ca8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/4d06bbeb719d4b62a34a1e1b042f8379.png
[https_github.com_mcx2020_accounting_commit_749197694afbdade29be024d3fb9366f9dde1bf7]: https://github.com/mcx2020/accounting/commit/749197694afbdade29be024d3fb9366f9dde1bf7
[Angular _ - _ https_zhuanlan.zhihu.com_p_45121775]: https://zhuanlan.zhihu.com/p/45121775