Inputs und Outputs bereitstellen
Inputs und Outputs von Host-Directives nach außen geben
Inputs und Outputs bereitstellen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Zusammengesetzte APIs veröffentlichen
Wenn Sie eine Direktive über hostDirectives zusammensetzen, sind ihre Inputs und Outputs standardmäßig verborgen. Mit der Composition API können Sie ausgewählte Inputs und Outputs für die öffentliche API des Hosts freigeben.
Die Objektform
Statt nur die Klasse aufzulisten, verwenden Sie ein Objekt mit den Arrays directive, inputs und outputs.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Eine Eingabe freigeben
Wenn Sie einen Eingabenamen in inputs aufführen, können Verbraucher ihn am Host-Element binden.
<app-button tooltipText="Save changes"></app-button>Eine Ausgabe freigeben
Wenn Sie eine Ausgabe aufführen, gibt der Host die Ereignisse dieser Direktive erneut aus.
<app-button (tooltipShown)="onShown()"></app-button>Beim Freigeben umbenennen
Verwenden Sie die Form publicName: internalName, um eine Eingabe oder Ausgabe beim Freigeben umzubenennen.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Ausgaben umbenennen
Ausgaben werden auf dieselbe Weise umbenannt.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Warum standardmäßig ausblenden?
Das Ausblenden zusammengesetzter Eingaben und Ausgaben hält die API des Hosts gezielt. Sie geben nur frei, was für Verbraucher sinnvoll ist, und vermeiden so, interne Details von Direktiven nach außen zu leiten.
Mit eigenen Eingaben kombinieren
Der Host kann neben den freigegebenen Eingaben auch eigene Eingaben haben. Angular führt sie zu einer einzigen öffentlichen API auf dem Element zusammen.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Namenskonflikte
Wenn der Name einer freigegebenen Eingabe mit einer eigenen Eingabe des Hosts kollidiert, vermeiden Sie den Konflikt durch Umbenennen und machen zugleich die Absicht klarer.
Zwei-Wege-Bindungen
Damit eine Zwei-Wege-Bindung durch Komposition unterstützt wird, geben Sie sowohl die Eingabe als auch die zugehörige Change-Ausgabe unter konsistenten Namen frei.
Bewährte Vorgehensweise
Geben Sie nur die minimale, sinnvoll benannte Oberfläche frei, die Verbraucher benötigen. Benennen Sie interne Namen so um, dass sie zur Terminologie Ihrer Komponente passen, nicht zu der der zugrunde liegenden Direktive.
Kurze Überprüfung
Testen Sie Ihr Verständnis vom Freigeben von Eingaben und Ausgaben.
Zusammenfassung
Sie haben gelernt, dass die Objektform von hostDirectives ausgewählte inputs und outputs für die API des Hosts freigibt. Dabei können Sie mit publicName: internalName optional umbenennen und die öffentliche Oberfläche gezielt festlegen.
Häufig gestellte Fragen
Ist die Lektion „Inputs und Outputs bereitstellen“ kostenlos?
Ja — der vollständige Text von „Inputs und Outputs bereitstellen“ 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 „Inputs und Outputs bereitstellen“?
Inputs und Outputs von Host-Directives nach außen geben 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 2 von 4.
Wie lange dauert die Lektion „Inputs und Outputs bereitstellen“?
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
- Die hostDirectives-Eigenschaft
- Inputs und Outputs bereitstellen
- Wiederverwendbare Verhaltensweisen erstellen
- Komposition vs. Vererbung