AngularJS hat die & Parameter, wo man einen Callback an eine Direktive übergeben kann (z.B. AngularJS way of callbacks. Ist es möglich, einen Rückruf als "@Input" für eine Angular-Komponente (etwas wie unten) zu übergeben? Wenn nicht, was käme dem am nächsten, was AngularJS tut?
@Component({
selector: 'suggestion-menu',
providers: [SuggestService],
template: `
<div (mousedown)="suggestionWasClicked(suggestion)">
</div>`,
changeDetection: ChangeDetectionStrategy.Default
})
export class SuggestionMenuComponent {
@Input() callback: Function;
suggestionWasClicked(clickedEntry: SomeModel): void {
this.callback(clickedEntry, this.query);
}
}
<suggestion-menu callback="insertSuggestion">
</suggestion-menu>
Ich denke, das ist eine schlechte Lösung. Wenn Sie eine Funktion mit @Input()
an eine Komponente übergeben wollen, ist der Dekorator @Output()
das, wonach Sie suchen.
export class SuggestionMenuComponent {
@Output() onSuggest: EventEmitter<any> = new EventEmitter();
suggestionWasClicked(clickedEntry: SomeModel): void {
this.onSuggest.emit([clickedEntry, this.query]);
}
}
<suggestion-menu (onSuggest)="insertSuggestion($event[0],$event[1])">
</suggestion-menu>
UPDATE
Diese Antwort wurde eingereicht, als sich Angular 2 noch in der Alpha-Phase befand und viele der Funktionen noch nicht verfügbar / undokumentiert waren. Während die unten noch funktionieren wird, ist diese Methode jetzt völlig veraltet. Ich empfehle nachdrücklich die akzeptierte Antwort gegenüber der folgenden.
Original-Antwort
Ja, in der Tat ist es, aber Sie wollen sicherstellen, dass es richtig scoped ist. Hierfür habe ich eine Eigenschaft verwendet, um sicherzustellen, dass "this" das bedeutet, was ich will.
@Component({
...
template: '<child [myCallback]="theBoundCallback"></child>',
directives: [ChildComponent]
})
export class ParentComponent{
public theBoundCallback: Function;
public ngOnInit(){
this.theBoundCallback = this.theCallback.bind(this);
}
public theCallback(){
...
}
}
@Component({...})
export class ChildComponent{
//This will be bound to the ParentComponent.theCallback
@Input()
public myCallback: Function;
...
}
Die derzeitige Antwort kann vereinfacht werden zu...
@Component({
...
template: '<child [myCallback]="theCallback"></child>',
directives: [ChildComponent]
})
export class ParentComponent{
public theCallback(){
...
}
}
@Component({...})
export class ChildComponent{
//This will be bound to the ParentComponent.theCallback
@Input()
public myCallback: Function;
...
}