一、简介
Angular Signals是一个体系,能够精细地盯梢整个应用程序中状态的运用方式和位置,从而使结构能够优化渲染更新。
信号 Signals 早已经不是新的概念了。在 PReact 和 solidjs 中早已经有了有了实践。
二、初始化项目
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open
三、定义 Signals
- HTML UI
<div style="font-size: 80px;">{{count()}}</div>
<div (click)="set()">设置</div>
<div (click)="add()">字体 1</div>
<div (click)="del()">字体 -1</div>
- TS 设置和更新 逻辑
import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
count = signal(1)
// 设置巨细
set() {
this.count.set(123)
}
// 增加
add() {
this.count.update(c => c 1)
}
// 减小
del() {
this.count.update(c => c - 1)
}
}
四、核算 computed Singal
核算 Singal 不是可写的
- html
<p>compouted works!</p>
<div>{{ count() }}</div>
<div>{{ countPlus() }}</div>
<button (click)="add()"> 1</button>
- TS 核算属性逻辑
import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-compouted',
standalone: true,
imports: [CommonModule],
templateUrl: './compouted.component.html',
styleUrl: './compouted.component.css'
})
export class CompoutedComponent {
count = signal(2)
countPlus = computed(() => { return this.count() * this.count() })
add() {
this.count.update(() => this.count() * this.count())
}
五、条件核算:动经过 computed 核算
const showCount = signal(false);
const count = signal(0);
const conditionalCount = computed(() => {
if (showCount()) {
return `The count is ${count()}.`;
} else {
return 'Nothing to see here!';
}
});
六、effect 副作用
import { Component, computed, signal, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { count } from 'rxjs';
@Component({
selector: 'app-effect',
standalone: true,
imports: [CommonModule],
templateUrl: './effect.component.html',
styleUrl: './effect.component.css',
})
export class EffectComponent {
count = signal(12);
countPlus = computed(() => this.count() * this.count());
countEff = effect(() => {
console.log(
`The current count is: ${this.count()} and ${this.countPlus()}`
);
});
}
需要注意的是 effect
函数需要一个返回值,
七、onCleanup 整理(定时器)
effect((onCleanup) => {
const user = currentUser();
const timer = setTimeout(() => {
console.log(`1 second ago, the user became ${user}`);
}, 1000);
onCleanup(() => {
clearTimeout(timer);
});
});
八、rxjs 可调查目标转信号
Angular 的@angular/core/rxjs-interop
包提供了有用的实用程序来将Angular Signals与 RxJS Observables 集成。
- html
<p>rxjs works!</p>
<div>{{counter()}}</div>
- TS 逻辑
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval } from 'rxjs';
import { toSignal} from '@angular/core/rxjs-interop'
@Component({
selector: 'app-rxjs',
standalone: true,
imports: [CommonModule],
templateUrl: './rxjs.component.html',
styleUrl: './rxjs.component.css'
})
export class RxjsComponent {
counterObservable = interval(1000);
// Get a `Signal` representing the `counterObservable`'s value.
counter = toSignal(this.counterObservable, {initialValue: 0});
}
九、rxjs 信号转可调查目标
import { Component, signal, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval } from 'rxjs';
import { toSignal, toObservable } from '@angular/core/rxjs-interop'
@Component({
selector: 'app-rxjs',
standalone: true,
imports: [CommonModule],
templateUrl: './rxjs.component.html',
styleUrl: './rxjs.component.css'
})
export class RxjsComponent {
counterObservable = interval(1000);
// Get a `Signal` representing the `counterObservable`'s value.
counter = toSignal(this.counterObservable, {initialValue: 0});
num = signal(100)
num$ = toObservable(this.num)
numEff = effect(() => {
this.num$.subscribe({
next(v) {
console.log(v)
}
})
})
}
十、小结
本文首要关注 Angular 17 汇总关于信号的内容,运用 signal 函数传入值定义一个信号数据。运用 set 办法进行设置,运用 update 办法进行更新。当然 signal 支撑核算办法,经过 computed 核算出一个新的值,或许根据其他的 signal 核算一个新的值。同时 angular 支撑 effect 函数,用于处理副作用,你的定时器都能够经过 effect 的 onCleanup 办法进行清除。由于 Angular 支撑 RxJS 信号也对可调查目标进行了支撑,能够经过可调查目标对其进行相互转换。