Wie man Änderungen von Eingabeelementen in ng-content beobachtet
Wie wird die Funktion der übergeordneten Komponente aufgerufen, wenn die Eingabe der untergeordneten Komponente geändert wurde?
Das Folgende ist die HTML-Struktur.
# app.comopnent.html
<form>
<textbox>
<input type="text">
</textbox>
</form>
# textbox.component.html
<div class="textbox-wrapper">
<ng-content>
</div>
Einschränkungen sind wie folgt.
TextboxComponent hatng-content
und müssen @ projizierinput
Element dazu. Senden Sie ein Ereignis in TextboxComponent, wenninput
Element wird etwas eingegeben. Ich will nicht macheninput
-Element, um mehr Attribute zu haben, z.<input type="text" (input)="event()">
.Ich habe Code geschrieben, kann aber keine Lösung finden ...
# input.directive.ts
@Directive({ selector: 'input', ... })
export class InputDirective {
ngOnChanges(): void {
// ngOnChanges() can observe only properties defined from @Input Decorator...
}
}
# textbox.component.ts
@Component({ selector: 'textbox', ... })
export class TextboxComponent {
@ContentChildren(InputDirective) inputs: QueryList<InputDirective>;
ngAfterContentInit(): void {
this.inputs.changes.subscribe((): void => {
// QueryList has a changes property, it can observe changes when the component add/remove.
// But cannot observe input changes...
});
}
}