Funzione di callback del passaggio angular al componente figlio come @Input

AngularJS ha i parametri & in cui puoi passare un callback a una direttiva (ad esempio il modo di richiamare AngularJS . È ansible passare un callback come @Input per un componente angular (qualcosa di simile in basso)? Se no, quale sarebbe la cosa più vicina a cosa fa AngularJS?

 @Component({ selector: 'suggestion-menu', providers: [SuggestService], template: ` 
`, changeDetection: ChangeDetectionStrategy.Default }) export class SuggestionMenuComponent { @Input() callback: Function; suggestionWasClicked(clickedEntry: SomeModel): void { this.callback(clickedEntry, this.query); } }

Penso che sia una brutta soluzione. Se vuoi passare una funzione in un componente con @Input() , @Output() è ciò che stai cercando.

 export class SuggestionMenuComponent { @Output() onSuggest: EventEmitter = new EventEmitter(); suggestionWasClicked(clickedEntry: SomeModel): void { this.onSuggest.emit([clickedEntry, this.query]); } }   

AGGIORNARE

Questa risposta è stata inviata quando Angular 2 era ancora in alfa e molte delle funzionalità non erano disponibili / non documentate. Mentre il sotto funzionerà ancora, questo metodo è ora del tutto obsoleto. Consiglio vivamente la risposta accettata su quanto segue.

Risposta originale

Sì, in effetti lo è, tuttavia vorrete assicurarvi che abbia un ambito corretto. Per questo ho usato una proprietà per garantire che this significhi ciò che voglio.

 @Component({ ... template: '', 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; ... } 

Un’alternativa alla risposta che SnareChops ha dato.

Puoi usare .bind (questo) nel tuo modello per avere lo stesso effetto. Potrebbe non essere pulito ma salva un paio di righe. Sono attualmente su angular 2.4.0

 @Component({ ... template: '', directives: [ChildComponent] }) export class ParentComponent { public theCallback(){ ... } } @Component({...}) export class ChildComponent{ //This will be bound to the ParentComponent.theCallback @Input() public myCallback: Function; ... } 

Ad esempio, sto utilizzando una finestra modale di accesso, in cui la finestra modale è il genitore, il modulo di accesso è il bambino e il pulsante di accesso richiama la funzione di chiusura del genitore modale.

Il modale genitore contiene la funzione per chiudere il modale. Questo genitore passa la funzione close al componente figlio di accesso.

 import { Component} from '@angular/core'; import { LoginFormComponent } from './login-form.component' @Component({ selector: 'my-modal', template: `  ` }) export class ParentModalComponent { modal: {...}; onClose() { this.modal.close(); } } 

Dopo che il componente di accesso secondario ha inviato il modulo di accesso, chiude il modale padre utilizzando la funzione di callback del genitore

 import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'login-form', template: `
` }) export class ChildLoginComponent { @Output() onClose = new EventEmitter(); submitted = false; onSubmit() { this.onClose.emit(); this.submitted = true; } }

La risposta attuale può essere semplificata per …

 @Component({ ... template: '', directives: [ChildComponent] }) export class ParentComponent{ public theCallback(){ ... } } @Component({...}) export class ChildComponent{ //This will be bound to the ParentComponent.theCallback @Input() public myCallback: Function; ... }