Угловой v16 (угловые сигналы)

Самый крупный релиз с момента первоначального развертывания Angular

Угловые сигналы

(предварительная версия для разработчиков, все еще в разработке)

Позволяет разработчику определять значения Reactive и предоставлять зависимости для их обновления.

На данный момент Angular использует Zone.JS для обнаружения изменений, но функция Angular Signals сделает Zone.js необязательным в будущих выпусках.

Сигналы — это примитивная реактивная система в Angular. Это означает, что Сигналы можно использовать как в компоненте, так и вне сервисов.

Преимущества-
На данный момент обнаружение изменений полностью контролируется и выполняется Zone.JS автоматически. Благодаря использованию сигналов Angular разработчик получит больший контроль над реактивностью и обнаружением изменений.

В комплекте с @angular/core

//create variables with signal

count = signal<number>(0);


// Signals are getter functions - calling them reads their value.
console.log('The count is: ' + count());

// To change the value of a writable signal, you can either .set() it directly:
count.update(value => value + 1);


const todos = signal([{title: 'Learn signals', done: false}]);

todos.mutate(value => {
  // Change the first TODO in the array to 'done: true' without replacing it.
  value[0].done = true;
});

RxJS-совместимость

Легко «поднять» сигналы к наблюдаемым, используя функции из @angular/core/rxjs-interop

import { toObservable, signal } from '@angular/core/rxjs-interop';

@Component({...})
export class App {
  count = signal(0);
  count$ = toObservable(this.count);

  ngOnInit() {
    this.count$.subscribe(() => ...);
  }
}

Вычислено

Вычисленные сигналы позволяют создавать производные сигналы из других сигналов зависимости.

const person = signal<{ firstname: string; lastname: string}>({ firstname: 'Anil', lastname: 'Verma'})

// Automatically updates when person() change;
const presentation = computed(() => ${person().firstname}${person().lastname}`;