1) Signale vs. RxJS: Erstellen einer Signalvariablen von Grund auf in Angular 16 und Vergleichen mit einem Observable.

In einem Beispiel, in dem wir ein Seitenleistenmenü und ein oberes Menü haben, weist das obere Menü jedes Mal, wenn wir eine Taste drücken, an, dass das Seitenleistenmenü ausgeblendet wird:

Mit RxJS:

Diese Kommunikation erfolgt in einem Dienst unter Verwendung eines Subjekts und eines Observablen, wobei jedes Mal, wenn wir auf die Schaltfläche klicken, ein Next aufgerufen wird, das den ausgegebenen Wert an das abonnierte Observable übergibt. Die Menükomponente der Seitenleiste wird einfach abonniert und verwendet diese Eigenschaft im HTML. Zuerst erstellen wir das Subjekt im Dienst, dann erstellen wir daraus das Observable und rufen next auf, um den ausgegebenen Wert zu übergeben:

Mit Signalen:

Dies kann einfach mit Signals erfolgen. Signale wurden in Angular erstellt, um in bestimmten einfacheren Fällen eine bessere Leistung zu erzielen. Sie werden aus @angular/core importiert.

Sie müssen ein Signal deklarieren und jedes Mal, wenn wir dieses Signal aktualisieren, rufen wir set darauf auf. In der Menükomponente der Seitenleiste müssen wir nur auf diese Eigenschaft verweisen, und um das Signal im HTML zu verwenden, müssen wir es in Klammern setzen, um seinen Wert zu erhalten, da Signale auf diese Weise verwendet werden.

Wir können auch eine Aktualisierung durchführen, was den zusätzlichen Vorteil hat, dass uns der vorherige Wert mitgeteilt wird. Dazu legen wir fest, dass es den bisherigen Wert und dessen Typ erhält, und geben mit einer Pfeilfunktion den neuen Wert an, der der negierte neue Wert ist:

Es gibt auch Möglichkeiten, Observablen in Signale und Signale in Observablen umzuwandeln:

Es ist nicht so, dass Signale ein Ersatz für Subjekte sind, da beide, zusammen mit Observablen, viel leistungsfähiger sind und viel mehr Funktionen haben, wie zum Beispiel RxJS-Operatoren (mit RxJS haben wir viel mehr Kontrolle). Signale bieten jedoch eine einfache Arbeitsweise und sind bei anderen Bibliotheken und Frameworks üblich.

RxJS ist eine Bibliothek von Microsoft, nicht Angular. Im Gegensatz dazu ist Signals eine Bibliothek von Angular, die mehr Kontrolle und Leistung bietet, da Angular genau wissen kann, welcher Teil sich geändert hat, wenn sich ein Zustand ändert. Dadurch wird vermieden, dass die gesamte Komponente erneut gerendert werden muss und man sich nur auf diesen bestimmten Teil konzentrieren kann.

2) Neue vereinfachte Möglichkeit, sich mit takeUntilDestroyed von RxJS in Angular 16 abzumelden.

In Angular ist es wichtig, sich von Observables abzumelden. In einem Beispiel speichern wir in OnInit ein Abonnement und in OnDestroy kündigen wir das Abonnement.

Die alte Methode bestand darin, eine Variable mit dem Abonnement zu speichern und sie zum Zeitpunkt des Abonnements in dieser Variablen zu speichern und dieses Abonnement in OnDestroy zu zerstören:

Detaillierte Erläuterung: Eine Eigenschaft vom Typ Subscription (von RxJS) wird erstellt. Diese Eigenschaft wird in ngOnInit initialisiert und weist ihr beim Erstellen die Referenz des Abonnements zu. Anschließend wird in ngOnDestroy das Abonnement gekündigt. Wenn die Komponente die Abonnementvariable nicht definiert hat, muss der Fehler behandelt werden, indem entweder ein Fragezeichen verwendet wird, um zu überprüfen, ob sie definiert ist, oder eine Bedingung verwendet wird.

Jetzt kann dies einfacher durchgeführt werden, ohne OnDestroy oder eine Abonnementvariable zu erstellen, indem der RxJS-Operator takeUntilDestroyed verwendet wird. Dadurch wird das Abonnement automatisch gekündigt, wenn die Komponente zerstört wird. Es ist wichtig, den DestroyRef-Dienst einzuschleusen und zu übergeben, damit er weiß, wann die Komponente zerstört wird:

Detaillierte Erläuterung: Für den Fall, dass wir uns nicht abmelden, fügen wir nun eine RxJS-Pipe hinzu und senden ihr einen takeUntilDestroyed(), einen NEUEN Operator, der von uns verlangt, eine destroyedRef zu übergeben, bei der es sich um einen Dienst (von @angular /core), die wir in den Konstruktor einfügen können.

Beispiel: In einem Seitenleistendienst wartet er auf einen Schaltflächenklick in der Navigationsleistenkomponente. Mit takeUntilDestroyed() wird das Abonnement nur dann gekündigt, wenn die Komponente zerstört wird, wodurch mehrere Abonnements vermieden werden. In diesem Fall wollen wir immer abhören, ob die Taste gedrückt wurde oder nicht; Daher möchten wir uns nur dann abmelden, wenn die Komponente zerstört wird.

Dies ist wichtig, da es sonst zuhört, auch wenn wir uns in anderen Komponenten befinden, und das Abonnement nur abmeldet, wenn wir die App schließen, da die Komponente zerstört wird. Dies ist von entscheidender Bedeutung, denn wenn es beim Navigieren durch Seitenkomponenten immer aktiv ist, z. B. in der ersten Navigation, abonniert es, wir navigieren dann zu einer anderen Seite und wenn wir zur ersten Seite zurückkehren, handelt es sich um ein zweites Abonnement. Dies führt zu zwei aktiven Abonnements. Daher ist es wichtig, sich abzumelden.

Ein wichtiger Hinweis: Wenn wir eine HTTP-Anfrage abonnieren, ist eine Abmeldung nicht erforderlich, da dies automatisch erfolgt.

3) Wirkung eines Signals in Angular. Auf Änderungen in einem Signal achten.

In einem Beispiel haben wir ein Signal, das einen booleschen Wert zurückgibt und in einer der folgenden Methoden mit einem Update aktualisiert wird:

Stellen Sie sich vor, Sie möchten benachrichtigt werden, wenn sich das Signal ändert, aber es ändert sich an vielen Orten, nicht nur bei dieser Methode. Wenn wir etwas tun wollen, wann immer es sich ändert, können wir dies mit einem Effekt tun. Diese Funktion nimmt ein Signal und prüft, ob es sich ändert, um die Methode innerhalb des Effekts automatisch auszuführen:

Damit können wir beispielsweise anstelle eines Konsolenprotokolls den Wert im lokalen Speicher speichern und ihn mit diesem Wert instanziieren. Dies ist besonders nützlich, wenn wir mit Code arbeiten, den wir nicht kennen und nicht sicher sind, an wie vielen Stellen er geändert wird.

– Notizen basierend auf dem Angular-Kurs von EfisioDev –