Angular 17 信号 Signals

一、简介

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 信号也对可调查目标进行了支撑，能够经过可调查目标对其进行相互转换。