Angular 19 Caractéristiques: LinkedSignal in Angular

Qu’est-ce que LinkedSignal in Angular?

Le LinkedSignal est une nouvelle fonctionnalité angulaire introduite dans la version 19. Il aide à gérer les états locaux qui dépendent d’autres signaux. Il crée un signal écrit qui met à jour automatiquement lorsque les signaux cela dépend du changement. Ceci est utile pour maintenir l’état local en synchronisation avec des données dynamiques.

Certains points importants concernant LinkedSignal sont:

1. Il s’agit d’un INDECTABLEIGNAL, vous permettant de définir et de mettre à jour la valeur directement.
2. Cela dépend du signal existant, ce qui fait que sa valeur soit recomputée chaque fois que le signal source change.
3. C’est différent de celui calculé car ils sont en lecture seule.

Comment utiliser LinkedSignal

Pour comprendre LinkedSignal, commencez par définir un type.

export interface IBook {
   Id: number;
   Title: string;
}

Ensuite, créez un signal pour configurer un signal réactif contenant un tableau de livres.

bookData: IBook[] = [
    {
      Id: 1,
      Title: 'Angular Essentials',
    },
    {
      Id: 2,
      Title: 'React Masterclass',
    },
  ];

  books: WritableSignal<IBook[]> = signal<IBook[]>(this.bookData);

Ensuite, nous utiliserons ce signal pour générer un LinkedSignal, comme démontré ci-dessous.

seletedBook = linkedSignal({
    source: this.books,
    computation: (a) => {
      console.log('hello');
      return a[0];
    },
  });

Comme vous pouvez le voir, un LinkedSignal peut être créé à l’aide de la fonction d’usine LinkedSignal. Vous pouvez soit transmettre explicitement la source et la fonction de calcul, comme indiqué ci-dessus, soit utiliser la syntaxe du raccourci ci-dessous.

seletedBook = linkedSignal(() => this.books()[0]);

Ensuite, vous pouvez utiliser à la fois le signal et le Signal Linked dans le modèle, comme indiqué ci-dessous.

<ul>
 @for (book of bookData; track book.Title) {
   <li>{{book.Title}}</li>
  }
</ul>

<h3>Selected Books : {{seletedBook().Title}}</h3> 

<button (click)="changeBook()">Change Books</button>
<button (click)="updateSelectedBook()">update selected book</button>

Nous avons ajouté deux boutons pour mettre à jour directement le signal source et le signal lié. Quand le changeBook La fonction met à jour le signal des livres, le selectedBook LinkedSignal est automatiquement recalculé avec le nouveau livre – dans ce cas, .NET.

changeBook() {
    this.bookData = [
      {
        Id: 1,
        Title: '.NET',
      },
      {
        Id: 2,
        Title: 'Java',
      },
      {
        Id: 3,
        Title: 'Angular Essentials',
      },
    ];

    this.books.set(this.bookData);
  }

Comme mentionné précédemment, comme LinkedSignal est écrivable, vous pouvez directement lui attribuer une valeur spécifique, comme indiqué dans la liste de code suivante:

updateSelectedBook() {
    this.seletedBook.set({
      Id: 1,
      Title: 'You Do not know JavaScript',
    });
  }

Résumer

Nous pouvons illustrer les points clés de notre discussion sur LinkedSignal avec le diagramme ci-dessous.

J’espère que vous trouverez cette publication d’introduction sur LinkedSignal utile et que vous utiliserez cette fonctionnalité dans le développement angulaire moderne.