Winkel 4: Benutzerdefinierte Komponenten "Steuerelemente"

Question

Ich erstelle eine eckige benutzerdefinierte Dropdown-Liste Komponente, um es als Steuerelement auf allen meinen Seiten zu verwenden.

Hier ist der HTML-Vorlage:

<select class="form-control" [(ngModel)]="value"> 
     <option [ngValue]="item" *ngFor="let item of list">{{item.Name}}</option> 
</select> 

Hier ist das Typoskript Code dahinter:

@Component({ 
    selector: 'dropdown', 
    templateUrl: './dropdown.component.html' 
}) 
export class DropdownComponent { 
    @Input() list: LookupModel[]; 

    @Input() 
    value: LookupModel; 

    @Output() 
    valueChange: EventEmitter<LookupModel>; 

    constructor(private elementRef: ElementRef) { 
     this.valueChange = new EventEmitter(); 
    } 

    select(value: LookupModel) { 
     this.valueChange.emit(value); 
    } 
} 

Und hier ist, wie ich es benutzen:

<dropdown [list]="projectsList" [(value)]="selectedProject"></dropdown> 

Diese Komponente funktioniert prima. Ich möchte unter einer Änderung Event-Handler wie das schaffen:

<select name="projectField" class="form-control" [(ngModel)]="selectedProject" (change)="filterBuilding()"> 
    <option [ngValue]="project" *ngFor="let project of projectsList">{{project.Name}}</option> 
</select> 

kann mir jemand bitte helfen? Gibt es eine Möglichkeit, die normalen HTML-Ereignishandler in mein benutzerdefiniertes Steuerelement aufzunehmen? Oder muss ich das alles nur manuell erledigen?

Wenn ich es manuell behandeln muss, wie man eine Methode sendet, wo ich nur einen Zeiger auf meine Funktion sende und die Rolle dieser Methode ist, jede Funktion auszuführen, die an sie übergeben wird?

Danke. Ich brauche die endgültige Ausgabe des Steuer so zu sein:

<dropdown [list]="projectsList" [(value)]="selectedProject" (change)="filterBuilding()"></dropdown> 

Answer 1

Verwenden ngModelChange die Änderung auf dem Modell zu erkennen:

(ngModelChange)="filterBuilding($event)" 

Answer 2

ich es lösen verwaltet, in der HTML-Vorlage für die Drop-Down-i addiert (ändern) event

<select class="form-control" [(ngModel)]="value" (change)="valueChange(value)"> 
     <option [ngValue]="item" *ngFor="let item of list">{{item.Name}}</option> 
</select> 

und im Code Maschinenschrift gesagt i die Valuechange Methode, um die Funktion zu emittieren:

@Component({ 
    selector: 'dropdown', 
    templateUrl: './dropdown.component.html' 
}) 
export class DropdownComponent { 
    @Input() list: LookupModel[]; 

    @Input() 
    value: LookupModel; 

    @Output() 
    onChange: EventEmitter<any>; 

    constructor(private elementRef: ElementRef) { 
     this.onChange = new EventEmitter(); 
    } 

    valueChange(value: LookupModel) { 
     this.onChange.emit(value); 
    } 
} 

Und das ist, wie ich es verwenden jetzt:

<dropdown [list]="projectsList" [(value)]="selectedProject" (onChange)="filterBuilding($event)"></dropdown>