Angular5中状态管理

OBKoro1 发布于2019-08-23 11:39 / 3167人阅读

摘要：前面学习了，都有状态管理，如中的是全局状态管理，在任何组件里都可以引用状态管理中的数据，同样，中的和也是，但遇到却不知道了。

前面学习了vue，react 都有状态管理，如vue中的vuex是全局状态管理，在任何组件里都可以引用状态管理中的数据，同样，react中的redux和mbox也是，但遇到angular5却不知道了。
一年前使用过angular1.x做过项目，那时全局状态可以使用$rootscope，也可以使用服务Service实现，下面就用Service方式在angular5中实现下吧
先定义状态管理对象，需要存什么数据，自己定义

export class UserInfo {
  public userInfo: boolean;
  constructor(){
      this.userInfo = true;  //设置全局的控制导航是否显示
  }
}

然后定义Service，如下

import { Injectable} from "@angular/core";
import { Headers, Http } from "@angular/http";
import { UserInfo } from "./user-info.model";

@Injectable()  //注入服务
export class ListsService{
  private  userInfo;
  constructor(private http: Http) { 
    this.userInfo = new UserInfo();
  }

  //设置路由显示的状态
  setUserInfo(v) {
    this.userInfo.userInfo = v;
  }
  //获取路由显示的状态
  getUserInfo() {
    return this.userInfo;
  }
}

配置了service一定要在ngmodule中导入，这样才能在此module中有效

import { BrowserModule } from "@angular/platform-browser";  
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";   
import { HttpModule }    from "@angular/http";

import { AppComponent } from "./app.component"; 

import { AppRouterModule } from "./router.module"; 
import { ViewComponent } from "./view.component";
import { ListComponent } from "./list.component";
import { OtherComponent } from "./other.component";
import { DetailComponent } from "./detail.component"; 
import { ListsService } from "./app.service";

@NgModule({
  declarations: [
    AppComponent,
    DetailComponent,
    ViewComponent,
    ListComponent,
    OtherComponent
  ],
  imports: [  
    BrowserModule,
    FormsModule ,
    AppRouterModule,
    HttpModule
  ],
  providers: [ListsService], 
  bootstrap: [AppComponent]  
})
export class AppModule { }

然后就可以在component中使用了

@Component({
  selector: "app-root",
  template: `
  
      
        特价展示
        列表展示
    
    
  
  `,
  styles:[`
  .lists a{
    padding:0 10px;
  }
  .active{
    color: #f60;
  }
  `]
})
export class AppComponent {
  private  userInfo;
 constructor(private listsService: ListsService) { 
      this.userInfo= this.listsService.getUserInfo();
 }
}

在详情页中通过改变状态来改变页面

@Component({
  selector: "app-detail",
  template: `
    
      详情页{{id}}
      
    

  `,
})
export class DetailComponent {
  private  userInfo;
  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private listsService: ListsService
  ) {
    this.userInfo= this.listsService.setUserInfo(false);
  }
  goBack(): void {
    this.location.back();
  }
  //组件销毁时执行
  ngOnDestroy():void{
    this.userInfo= this.listsService.setUserInfo(true);
  }
}

好了，这样就ok了。
若有疑问，请加群交流：654979292

私有云 GPU服务器状态等待中 angular5 实例维护中状态状态管理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97267.html

angular1.x和angular2+并行，angular1.x 升级 angular2+方案

摘要：可以在不必打断其它业务的前提下，升级应用程序，因为这项工作可以多人协作完成，在一段时间内逐渐铺开，下面就方案展开说明主要依赖提供模块。在混合式应用中，我们同时运行了两个版本的。这意味着我们至少需要和各提供一个模块。 angular1.x 升级 angular2+ 方案我给大家提供的是angular1.x和angular5并行，增量式升级方案，这样大家可以循序渐进升级自己的应用，不想看...

Olivia 2019-08-26 11:36 评论0 收藏0
angular5 Reactive Form动态表单

摘要：根据最近的使用总结一下在中使用创建表单需求创建一个带验证的表单如果表单验证不通过则提交按钮自定义验证器需求密码需要格式为数字字母下划线位参考自定义密码验证通过验证时需要返回密码格式为数字字母下划线位动态创建表单需求表单增 Angular5 Reactive Form 根据最近的使用, 总结一下在ngx中使用reactive form 1. 创建表单需求: 创建一个带验证的表单, 如果...

MorePainMoreGain 2019-08-22 16:44 评论0 收藏0
问道Angular——Angular5/6/7项目添加热更新(HMR)功能

摘要：提供以上热更新功能使用初始化项目命令行进入该目录启动项目将附带功能。提供angular6以上HMR(热更新)功能使用hmr-cli npm i -g hmr-cli 初始化angular项目,命令行进入该目录 hmr init npm run hmr启动项目将附带hmr功能。详细配置如下： Angular6添加HMR environments目录 environme...

Aceyclee 2019-08-23 12:17 评论0 收藏0
Angular5 整合富文本编辑器TinyMCE（汉化+上传）

摘要：简介是一个轻量级的富文本编辑器，相对于更加精简，但足以满足绝大部分场景的需要。 1. TinyMCE简介 TinyMCE是一个轻量级的富文本编辑器，相对于CKEditor更加精简，但足以满足绝大部分场景的需要。 2. 安装和配置TinyMCE 2.1 安装TinyMCE npm install --save tinymce 2.2 设置tinymce全局访问（.angular-...

zeyu 2019-08-22 13:50 评论0 收藏0
前端人员必须知道的三个问题

摘要：第一个问题前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段初级阶段入门常见标签，新增的，语义化标签等等选择器，背景，文本，链接，列表，盒模型，定位，浮动，新增的属性栅格化系统，按钮，表单，导航数据类型，对象，函数，运算符，语句，，选第一个问题：前端都做哪些事呢，前端都需要哪些技术呢前端发展的三个阶段：初级阶段：（入门） html：常见标签，html5新增的，语义化标签等等...

zollero 2019-08-02 16:13 评论0 收藏0