angular的状态管理

最新推荐文章于 2024-05-11 09:33:16 发布

圆圆01

最新推荐文章于 2024-05-11 09:33:16 发布

阅读量3.2k

点赞数 1

分类专栏： Angular.js 文章标签： react.js node.js javascript

本文链接：https://blog.csdn.net/weixin_45844049/article/details/108239251

版权

Angular.js 专栏收录该内容

4 篇文章 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
在这里插入图片描述

user.model.ts
在这里插入图片描述
调用
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;
  }
}