【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？

什么是Vuex？只需三分钟！只需创建一个vuex.js文件，让你马上学会使用Vuex，尽管Vuex是个鸡肋！(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧！)_你挚爱的强哥❤给你发来1条消息❤-CSDN博客https://s-z-q.blog.csdn.net/article/details/119792336

ng g s storage

storage.service.ts

import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'
})
export class StorageService {text = '初始值';color = 'gray';
}

app.component.html、app.component.css、app.component.ts

<button (click)="storageService.text='全局改变后的值';storageService.color='red'">改变全局变量(文字变红色)</button>
<h1 [attr.color]="storageService.color">{{storageService.text}}</h1>
<app-other></app-other>________________________________________________________________________________[color="gray"] {color: gray;
}
[color="red"] {color: red;
}________________________________________________________________________________import { Component } from '@angular/core';
import { StorageService } from './services/storage.service';
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {constructor(public storageService: StorageService,) {}
}

components/other.component.html、components/other.component.css、components/other.component.ts

<p>其他组件：</p>
<h1 [attr.color]="storageService.color">{{storageService.text}}</h1>________________________________________________________________________________[color="gray"] {color: gray;
}
[color="red"] {color: red;
}________________________________________________________________________________import { Component } from '@angular/core';
import { StorageService } from '../../services/storage.service';
@Component({selector: 'app-other',templateUrl: './other.component.html',styleUrls: ['./other.component.css']
})
export class OtherComponent {constructor(public storageService: StorageService,) {}
}

点击按钮后

【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？相关推荐

您需要了解有关Angular中的ng-template，ng-content，ng-container和* ngTemplateOutlet的所有信息...
It was one of those days when I was busy working on new features for my office project. All a sudden ...
Angular中ngCookies模块介绍
1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在内存中,浏览器关闭后就消失了,其存在时间是短 ...
Angular 中的依赖注入link
Angular 中的依赖注入link 依赖注入(DI)是一种重要的应用设计模式. Angular 有自己的 DI 框架,在设计应用时常会用到它,以提升它们的开发效率和模块化程度. 依赖,是当类需要执行 ...
获取Angular中的AngularJS功能
介绍 ( Introduction ) If you have solid experience with AngularJS 1.x, you're well aware of the framew ...
Facebook登录-前端网页以及在angular中的使用方法
leung_blog | ngFacebook | facebook JavaScript SDK | 官网登录流程 | timelessmemoryli 总体思想先通过FB.getLoginSta ...
Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
将选择元素绑定到Angular中的对象
本文翻译自:Binding select element to object in Angular I'd like to bind a select element to a list of obj ...
Angular 中得 scope 作用域梳理
2019独角兽企业重金招聘Python工程师标准>>> $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope ...
关于Angular中使用HTML的select和option标签的一些问题
如果在Angular中使用HTML的select和option标签时,给两个标签分别绑定数据的时候,虽然可以通过[ngModel]和(ngModelChange)的形式绑定数值及选项变化后触发的事件. ...

【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？

【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？相关推荐

最新文章

热门文章