郑州高校网站建设服务公司,工控界面设计,功能网站首页模板,wordpress 主机推荐三个框架#xff0c;都有响应式数据的概念。在angular里面有专门的叫法#xff0c;响应式数据叫信号,英文名signal。其他两个框架式没有专门的名字的#xff0c;统称为动态数据。这点可以说#xff0c;angular还是太细了#xff0c;细节值得点赞#xff01;#xff01; …三个框架都有响应式数据的概念。在angular里面有专门的叫法响应式数据叫信号,英文名signal。其他两个框架式没有专门的名字的统称为动态数据。这点可以说angular还是太细了细节值得点赞
那么信号也就是响应式数据在ng里面该怎么使用呢
实现效果 代码实现
省略无关代码核心包中引入signal这个api,包装我们需要做成响应式的数据
import { Component, signal } from angular/core;
money signal(100);handleChangeAge () {this.money.update((v) v 100);
};页面上使用
p我银行账户的存款:{{money()}}/p
button (click)handleChangeAge()改变年龄/button注意
页面上使用的使用无论是响应式数据还是方法的调用都要加上()否则页面上无法显示这点跟其他两个框架略有差别。ng中事件绑定用的是(enventType) enventName()动态属性用的是[attrName] attrName2
计算属性
根据已有的值计算出新的一个值这样我们就可以用到computed这个api这个属性是惰性的之前的计算结果会被缓存如果再次读取就会返回缓存的值不重新计算。
只有当依赖的值变化后ng才会知道更新缓存的值了
p我银行账户的存款:{{money()}}/p
p需要换银行的贷款:{{payload()}}/pbutton (click)handleChangeAge()改变存款/buttonmoney signal(100);
payload computed(() this.money() * 2);计算属性是不可写的也就是无法直接改变要改变计算属性最直接的就是改变他依赖的值。 直接set是会报错
副作用effect的使用
就是当任何signal变化时都会触发effect的运行所以我们可以用effect创建一个副作用:
effect(() {console.log(The current count is: ${count()});
});在ts项目中直接这样写会提示语法错误需要有返回值。 所以给它赋值下就可以了 或者是在constructor中进行初始化 副作用effect使用推荐的场景 记录正在显示的数据及其更改时间用于分析或作为调试工具。使数据与 window.localStorage 保持同步。添加无法用模板语法表达的自定义 DOM 行为。对 、图表库或其他第三方 UI 库执行自定义渲染。 手动注入effect
import {Component,signal,computed,effect,inject,Injector,
} from angular/core;Component({selector: UserProfile,templateUrl: ./index.html,styleUrls: [./index.css],
})
export class UserProfile {// constructor() {// effect(() {// console.log(payload, ${this.payload()});// console.log(money-------, this.money());// });// }ngOnInit(): void {this.initializeLogging();}title 用户信息展示组件;userInfo {name: 张三,age: 20,sex: 男,address: {city: 北京,street: 朝阳区,},};readonly money signal(100);private injector inject(Injector);payload computed(() this.money() * 2);handleChangeAge () {this.money.update((v) v 100);};initializeLogging(): void {effect(() {console.log(The count is: ${this.money()});},{ injector: this.injector });}reset(): void {this.money.set(0);}
}button (click)handleChangeAge()改变存款/button
button (click)reset()重置/buttoneffect取消对某个值的监听untracked这个api包裹就可以了
effect(() {console.log(The count is: ${untracked(this.money)});},{ injector: this.injector }
);在effect里面销毁定时器等操作
effect(
(onCleanup) {const timer setInterval(() {this.money.update((v) v 1);}, 1000);onCleanup(() clearInterval(timer));
},
{ injector: this.injector }
);
}
