{"id":3238,"date":"2025-04-15T07:56:37","date_gmt":"2025-04-15T05:56:37","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=3238"},"modified":"2026-04-09T11:28:14","modified_gmt":"2026-04-09T09:28:14","slug":"was-sind-linked-signals","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/was-sind-linked-signals\/","title":{"rendered":"Angular Signals Teil 6 – Was sind Linked Signals?"},"content":{"rendered":"

Click here<\/a> for the english version of this blog post.<\/strong><\/em><\/p>\n

Erweitere die Funktionalit\u00e4t Deiner Signals mit Linked Signals<\/h2>\n

Mit Angular 19 wurde nun ein neues Feature eingef\u00fchrt: Linked Signals<\/strong>. Wenn Du Dich fragst: Was sind Linked Signals? Und was bringt es mir sie zu nutzen? Bist Du hier genau richtig. Wir erkl\u00e4ren Dir wie Linked Signals funktionieren und wie Du mit ihnen die Funktionalit\u00e4t Deiner Signals erweitern kannst. Falls Du einen kurzen Refresh zu Angular Signals willst, haben wir noch einen Artikel der genau richtig ist. In unserem Angular Guide<\/a> geben wir Dir einen \u00dcberblick \u00fcber alle Artikel in unserer Angular Signals Reihe, angefangen mit: Was sind eigentlich Signals und welche Vorteile bringen Sie mit?<\/p>\n

Was sind also Linked Signals: Sie \u00e4hneln grunds\u00e4tzlich den mit computed()<\/code> erstellten readonly Signals<\/strong>, mit einem entscheidenden Unterschied \u2013 Linked Signals sind writeable Signals<\/strong>, das hei\u00dft sie k\u00f6nnen manuell ge\u00e4ndert werden, wie signal()<\/code>. Das bedeutet, dass ihr Wert nicht ausschlie\u00dflich von dem Signal in der Callback-Funktion abh\u00e4ngt, sondern auch gezielt angepasst werden kann. Im Folgenden schauen wir uns an wie man Linked Signals erstellt und welches Problem sie beseitigen.<\/p>\n

Das Problem mit readonly Signals<\/h2>\n

Bevor wir uns mit Linked Signals befassen, m\u00f6chten wir zun\u00e4chst das zugrunde liegende Problem betrachten. Dazu erstellen wir ein kleines Beispiel und wenden Signals so an, wie wir sie bereits kennengelernt haben.<\/p>\n

In unserem Szenario geht es um Restaurantinformationen mit zwei zentralen Funktionen:<\/p>\n

    \n
  1. \n

    Dem Nutzer werden automatisch die Details des bestbewerteten Restaurant angezeigt.<\/p>\n<\/li>\n

  2. \n

    Der Nutzer kann ein Restaurant aus einer Liste manuell ausw\u00e4hlen.<\/p>\n<\/li>\n<\/ol>\n

    Was wir bisher \u00fcber Signals wissen<\/h3>\n

    K\u00fcmmern wir uns zun\u00e4chst einmal um die erste Anforderung. Wir erstellen ein signal()<\/code> namens restaurants<\/code>, das eine Liste von Restaurant-Objekten enth\u00e4lt. Dann wird ein computed()<\/code>-Signal namens selectedRestaurant<\/code> erstellt, welches das Restaurant mit der h\u00f6chsten Bewertung aus der restaurants<\/code>-Liste zur\u00fcckgibt. Zur Erinnerung: Wenn sich das restaurants<\/code>-Signal durch set()<\/code> oder update()<\/code> \u00e4ndert, wird die Callback-Funktion des abh\u00e4ngigen Signals (selectedRestaurant<\/code>) automatisch ausgef\u00fchrt und das bestbewertete Restaurant wird ermittelt.<\/p>\n

    import { Component, computed, Signal, signal } from '@angular\/core';\r\n\r\n@Component({\r\n...\r\n  template: `\r\n    <h3>All restaurants:<\/h3>\r\n    @for (restaurant of this.restaurants(); track restaurant) {\r\n      <li>\r\n      Name: {{restaurant.name}} Rating: {{restaurant.rating}}\r\n      <\/li>\r\n    }\r\n    <br>\r\n    <h3>Restaurant details:<\/h3>\r\n    <div>Name: {{selectedRestaurant().name}} Rating: {{selectedRestaurant().rating}}<\/div>\r\n    <div>Address: {{selectedRestaurant().address}}<\/div>\r\n`,\r\n\r\n}) \r\n\r\nexport class RestaurantSignalsComponent {\r\n\r\n  \/\/ Create Restaurant Signal\r\n  restaurants: Signal<Restaurant[]> = signal([\r\n    { name: 'Pizza Paradiso', rating: 2.0, address: '123 Pizza Street, Rome' },\r\n    { name: 'Sushi World', rating: 4.9, address: '456 Sushi Lane, Tokyo' },\r\n    { name: 'Pasta Palace', rating: 3.0, address: '789 Pasta Avenue, Florence' },\r\n  ]);\r\n\r\n  \/\/ Create Computed Signal\r\n  selectedRestaurant = computed(() => {\r\n    return this.restaurants().sort((a, b) => b.rating - a.rating)[0];\r\n  });\r\n}<\/pre>\n
    Wir m\u00f6chten nun die zweite Anforderung umsetzen, damit der Nutzer ein Restaurant beispielsweise per Klick-Event manuell ausw\u00e4hlen kann, anstatt nur automatisch das bestbewertete Restaurant angezeigt zu bekommen. Eine naheliegende L\u00f6sung w\u00e4re, selectedRestaurant<\/code> mit set()<\/code> oder update()<\/code> zu ver\u00e4ndern. Das ist jedoch nicht m\u00f6glich<\/strong>, da ein computed()<\/code>-Signal, wie anfangs erw\u00e4hnt, readonly <\/strong>ist und sich ausschlie\u00dflich dann aktualisiert, wenn sich seine abh\u00e4ngigen Signale \u00e4ndern. Daher w\u00fcrde der folgende Code nicht wie gew\u00fcnscht funktionieren:<\/p>\n
    ...\r\n@Component({...})\r\nexport class RestaurantSignalsComponent {\r\n  ...\r\n  \/\/ Create Computed Signal\r\n  selectedRestaurant = computed(() => {\r\n    return this.restaurants().sort((a, b) => b.rating - a.rating)[0];\r\n  });\r\n\r\n  \/\/ Computed Signal: Will not work\r\n  selectRestaurantOnList(restaurant: any){\r\n    this.selectedRestaurant.set(restaurant) \/\/ X ERROR\r\n  }\r\n\r\n}\r\n<\/pre>\n
    Um computed()<\/code> mit einer manuellen Auswahl zu kombinieren, ben\u00f6tigen wir ein zus\u00e4tzliches writeable<\/strong> Signal, das den vom Nutzer gew\u00e4hlten Wert speichert. Da computed()<\/code> nur readonly<\/strong> ist, l\u00e4sst sich der Wert nicht direkt setzen. Stattdessen kann ein weiteres signal()<\/code> oder ein effect()<\/code> verwendet werden, das auf \u00c4nderungen im restaurants<\/code>-Signal reagiert und sicherstellt, dass das ausgew\u00e4hlte Restaurant nur dann automatisch gesetzt wird, wenn der Nutzer noch keine eigene Auswahl getroffen hat. Dieser imperativer Ansatz ist umst\u00e4ndlich, da wir explizit steuern m\u00fcssen, wann und wie das ausgew\u00e4hlte Restaurant aktualisiert wird, anstatt dies rein deklarativ zu l\u00f6sen. Genau hier bieten Linked Signals<\/strong> eine viel elegantere Alternative.<\/p>\n
    \n<\/picture> <\/picture> \"Angular<\/picture> <\/a><\/p>\n
    Die L\u00f6sung: Linked Signals erstellen<\/h2>\n
    Wir m\u00f6chten unser Beispiel nun mit Linked Signals umsetzen und zeigen, wie viel einfacher sich die Anforderungen damit realisieren lassen. Ein linkedSignal()<\/code> kombiniert\u00a0 computed()<\/code> und signal()<\/code>, indem es berechnete Werte automatisch aktualisiert, w\u00e4hrend sie gleichzeitig manuell \u00fcberschrieben werden k\u00f6nnen. Das bedeutet, dass sie writeable<\/strong> sind, sodass der Benutzer den Wert von selectedRestaurant<\/code> \u00fcber set()<\/code> oder update()<\/code> nach Belieben anpassen kann.<\/p>\n
    Ein Linked Signal kann ganz einfach mit der Funktion linkedSignal()<\/code> erzeugt werden.
    \nAusgew\u00e4hlte Restaurants werden \u00fcber die set()<\/code>-Funktion gesetzt.<\/p>\n
    _import { linkedSignal, signal } from '@angular\/core';\r\n@Component({...})\r\nexport class RestaurantLinkedSignalsComponent {\r\n\r\n  restaurants = signal([\r\n    { name: 'Pizza Paradiso', rating: 2.0, address: '123 Pizza Street, Rome'},\r\n    { name: 'Sushi World', rating: 4.9, address: '456 Sushi Lane, Tokyo'},\r\n    { name: 'Pasta Palace',rating: 3.0, address: '789 Pasta Avenue, Florence'},\r\n  ]);\r\n\r\n  \/\/ Create Linked Signal\r\n  selectedRestaurant = linkedSignal(() => {\r\n    return this.restaurants().sort((a, b) => b.rating - a.rating)[0];\r\n  })\r\n\r\n  \/\/ Manual Selection\r\n  selectRestaurantOnList(restaurant: Restaurant) {\r\n    this.selectedRestaurant.set(restaurant);\r\n  }\r\n\r\n}<\/pre>\n
    Alternative Erstellung<\/h3>\n
    Zur Erzeugung kann auch ein objektbasierten Ansatz verwendet werden. Dabei werden die Quelle (Source<\/code>) und die Berechnung (Computation<\/code>) explizit angegeben. Diese Syntax ist flexibler und eignet sich f\u00fcr komplexe Anwendungsf\u00e4lle.<\/p>\n
    ...\r\nselectedRestaurant = linkedSignal({\r\n  source: this.restaurants,\r\n  computation: () => {\r\n    return this.restaurants().sort((a, b) => b.rating - a.rating)[0];\r\n  }\r\n});\r\n<\/pre>\n
    Fazit<\/h2>\n
    Linked Signals<\/strong> schlie\u00dfen eine L\u00fccke zwischen readonly computed()<\/code>-Signals und normalen writeable signal()<\/code>-Signals. Sie erm\u00f6glichen es, berechnete Werte automatisch zu aktualisieren<\/strong>, w\u00e4hrend sie gleichzeitig manuell \u00fcberschrieben<\/strong> werden k\u00f6nnen.<\/p>\n
      \n
    • signal()<\/code>: Ein einfaches Signal, das einen Wert speichert und sowohl gelesen als auch ver\u00e4ndert werden kann (writetable<\/strong>).<\/li>\n
    • computed()<\/code>: Ein lesbares Signal, das automatisch neu berechnet wird, wenn sich abh\u00e4ngige Signals \u00e4ndern, aber nicht direkt ver\u00e4ndert werden kann (readonly<\/strong>).<\/li>\n
    • linkedSignal()<\/code>: Ein Signal, das automatisch neu berechnet wird, wenn sich abh\u00e4ngige Signals \u00e4ndern, und welches auch manuell ge\u00e4ndert werden kann (writeable<\/strong>).<\/li>\n<\/ul>\n
      Erfahrung ist der beste Lehrer: Hands-On mit Linked Signals<\/h2>\n
      Bist Du bereit, die Theorie in die Praxis umzusetzen? In diesem interaktiven StackBlitz-Beispiel befindet sich die vorgestellte Beispielanwendung, die die Grundkonzepte von Linked Signals aufgreift und die vorgestellten Beispiele und Funktionen beinhaltet.<\/p>\n