Angular v16 представляет новую интересную функцию под названием Angular Signals, которая обеспечивает детальное отслеживание использования состояния в вашем приложении. Сигналы позволяют оптимизировать обновления рендеринга, уведомляя заинтересованных потребителей об изменении значения. В этой статье мы рассмотрим, как можно помечать компоненты для проверки, когда они считывают сигнал, обеспечивая эффективные обновления и оптимизацию рендеринга. Давайте углубимся и откроем для себя силу сигналов Angular!

Понимание угловых сигналов

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

Что такое сигналы?

Сигналы в Angular — это оболочки значений, которые могут уведомлять потребителей об изменении этих значений. Они используются для отслеживания того, где считывается сигнал, и позволяют Angular оптимизировать обновления рендеринга. Сигналы могут содержать любое значение, от простых примитивов до сложных структур данных.

Существует два типа сигналов: записываемые сигналы и вычисляемые сигналы.

  • Записываемые сигналы: Записываемые сигналы предоставляют API для прямого обновления их значений. Вы можете создавать записываемые сигналы, используя функцию signal, и вы можете обновлять их значения, используя операции .set() или .update().
  • Вычисленные сигналы: Вычисленные сигналы получают свои значения из других сигналов. Вы определяете вычисляемые сигналы с помощью функции computed, определяя функцию вывода. Вычисленные сигналы оцениваются лениво, то есть их функция вывода запускается только при чтении сигнала, а вычисленное значение кэшируется для последующих чтений.

Эффекты с сигналами

Эффекты — это операции, которые запускаются всякий раз, когда изменяется одно или несколько значений сигнала. Они создаются с помощью функции effect. Эффекты отслеживают считывание значения сигнала во время их выполнения, и всякий раз, когда любое из этих значений сигнала изменяется, эффект запускается снова. Это гарантирует, что эффект всегда выполняется асинхронно в процессе обнаружения изменений.

Эффекты полезны для таких задач, как ведение журнала, синхронизация данных с локальным хранилищем, добавление пользовательского поведения DOM или выполнение пользовательского рендеринга.

Маркировка компонентов для проверки сигналами

В Angular v16 появилась возможность автоматически помечать компоненты для проверки, считывают ли они сигнал. Когда компонент OnPush использует значение сигнала в своем шаблоне, Angular отслеживает сигнал как зависимость этого компонента. В результате, когда сигнал обновляется, Angular автоматически помечает компонент для обновления во время следующего цикла обнаружения изменений. Этот механизм обеспечивает эффективное обновление компонентов, использующих сигналы, при изменении их базовых данных.

Давайте рассмотрим, как эта функция работает, на практическом примере.

Пример: использование сигналов в компоненте

Предположим, у нас есть компонент OnPush, который использует значение сигнала в своем шаблоне. Вот как мы можем использовать сигналы в компоненте:

import { signal } from '@angular/signals';
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `
    <div>
      <h2>Welcome, {{ name }}</h2>
      <p>Your age is: {{ age }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserComponent implements OnChanges {
  @Input() ageSignal: Signal<number>;

  name: string;
  age: number;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.ageSignal) {
      this.age = this.ageSignal();
    }
  }
}

В приведенном выше примере мы импортируем функцию signal из пакета @angular/signals. UserComponent — это компонент OnPush, который получает входное свойство ageSignal типа Signal<number>. Всякий раз, когда ageSignal обновляется, запускается метод ngOnChanges, и свойство age компонента обновляется новым значением.

Использование сигналов в родительском компоненте

Теперь давайте посмотрим, как мы можем использовать UserComponent и сигналы в родительском компоненте:

import { signal } from '@angular/signals';
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <button (click)="incrementAge()">Increment Age</button>
      <app-user [ageSignal]="ageSignal"></app-user>
    </div>
  `,
})
export class ParentComponent {
  ageSignal: Signal<number> = signal(25);

  incrementAge(): void {
    this.ageSignal.update((age) => age + 1);
  }
}

В ParentComponent мы создаем записываемый сигнал с именем ageSignal, используя функцию signal. Начальное значение сигнала установлено на 25. При нажатии кнопки «Увеличить возраст» метод incrementAge обновляет ageSignal, увеличивая его значение на 1 с помощью операции update.

Затем ageSignal передается как вход ageSignal в UserComponent. В результате UserComponent автоматически отслеживает ageSignal как зависимость и обновляет шаблон компонента при каждом изменении значения сигнала.

Внедрение Angular Signals в Angular v16 предоставляет мощный механизм для отслеживания использования состояния и оптимизации обновлений рендеринга в вашем приложении. Используя сигналы, вы можете помечать компоненты для проверки, когда они считывают сигнал, обеспечивая эффективные обновления и оптимизацию рендеринга. Эта функция значительно упрощает процесс распространения изменений и автоматизирует процесс обновления компонентов с помощью сигналов.

В этой статье мы рассмотрели концепцию угловых сигналов, включая записываемые и вычисляемые сигналы, а также эффекты. Затем мы углубились в возможность маркировки компонентов для проверки с помощью сигналов и представили пример, демонстрирующий, как использовать сигналы в компоненте OnPush.

С помощью Angular Signals вы можете упростить процесс обнаружения и рендеринга изменений вашего приложения, что приведет к повышению производительности и улучшению взаимодействия с пользователем. Итак, вперед, используйте возможности Angular Signals в своих приложениях Angular v16!