Signals in Templates
Binden Sie Signalwerte direkt in Component-Templates ein.
Signals in Templates ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Signals in Templates
Einer der größten Vorteile von Signals: Sie lesen sie direkt in Templates, indem Sie sie aufrufen – genau wie in TypeScript. Eine async pipe ist nicht erforderlich.
Lesen in Interpolationen
Rufen Sie das Signal im Template innerhalb der Interpolation mit geschweiften Doppelklammern auf, um seinen Wert anzuzeigen.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Keine async pipe erforderlich
Bei Observables benötigten Sie die async pipe, um das Observable zu abonnieren und das Abonnement wieder zu beenden. Signals sind synchron, daher rufen Sie sie einfach auf. Es gibt nichts, wovon Sie sich abmelden müssen.
Automatische Aktualisierung der Ansicht
Wenn sich ein im Template gelesenes Signal ändert, erkennt Angular, dass dieses Template davon abhängt, und aktualisiert nur dieses Binding. Das ist feingranulare Reaktivität in Aktion.
Signals in Event-Handlern aufrufen
Binden Sie Ereignisse an Methoden der Komponente, die Signals aktualisieren. Das Template rendert die betroffenen Bindings automatisch neu.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signals in Property-Bindings
Sie können ein Signal innerhalb jedes Bindings aufrufen, einschließlich Property- und Attribut-Bindings.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signals mit integriertem Control Flow
Moderne Templates verwenden integrierte Control-Flow-Blöcke. In einem if-Block lesen Sie ein Signal, indem Sie es aufrufen.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Computed Signals in Templates
Abgeleitete Werte eignen sich hervorragend für Templates. Ein computed Signal wird nur neu berechnet, wenn sich seine Quellen ändern, und wird auf dieselbe Weise gelesen.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Computed Signals in der Ansicht lesen
Lesen Sie das computed Signal im Template genauso wie jedes andere Signal.
// template: <p>Total: {{ total() }}</p>Warum das effizient ist
Da Angular genau erfasst, welche Template-Ausdrücke welche Signals lesen, kann die Verarbeitung von Ansichtsteilen übersprungen werden, die nicht vom geänderten Signal abhängen.
Häufiger Fehler: Klammern vergessen
Wenn Sie in einem Template count statt count() schreiben, zeigen Sie die Signal-Funktion selbst an, nicht ihren Wert. Rufen Sie das Signal immer auf.
Kurztest: Templates
Wie werden Signals in Templates verwendet?
Zusammenfassung: Signals in Templates
Sie lesen Signals in Templates, indem Sie sie mit Klammern aufrufen – ohne async pipe und ohne etwas abbestellen zu müssen. Angular aktualisiert nur die Bindings, die von einem geänderten Signal abhängen, und computed Signals funktionieren auf dieselbe Weise. Damit haben Sie die Grundlagen von Signals abgeschlossen.
Häufig gestellte Fragen
Ist die Lektion „Signals in Templates“ kostenlos?
Ja — der vollständige Text von „Signals in Templates“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Signals in Templates“?
Binden Sie Signalwerte direkt in Component-Templates ein. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Signals in Templates“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Was sind Signals
- Signals erstellen und lesen
- Signals mit set und update aktualisieren
- Signals in Templates