Angular Pass Callback-Funktion zur Kindkomponente als @Input

AngularJS hat die & Parameter, wo Sie passieren konnte, ein callback zu einer Richtlinie (e.g AngularJS Weg von Rückrufen. Ist es möglich, übergeben Sie einen Rückruf als ein @Input für eine Eckige Komponente (etwas, wie)? Wenn nicht, was wäre die nächste Sache, was ist AngularJS?

@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>

InformationsquelleAutor der Frage Michail Michailidis | 2016-02-11

  1. 136

    Ich denke, das ist eine schlechte Lösung. Wenn Sie möchten, übergeben Sie eine Funktion in eine Komponente mit @Input()@Output() decorator ist, was 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>

    InformationsquelleAutor der Antwort Serginho

  2. 66

    UPDATE

    Dieser Antwort wurde übermittelt, wenn Winkel-2 war noch in der alpha und viele der features waren nicht verfügbar /nicht dokumentiert. Während der unten funktioniert weiterhin, diese Methode ist inzwischen völlig veraltet. Ich stark empfehlen, die akzeptierten Antworten über die unten.

    Ursprüngliche Antwort

    Ja in der Tat es ist, aber Sie wollen, stellen Sie sicher, dass es ausgelegt ist, richtig. Für diese habe ich verwendet, eine Eigenschaft, um sicherzustellen, dass this bedeutet, wie ich es wollte.

    @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; 
  ...
}

    InformationsquelleAutor der Antwort SnareChops

  3. 18

    Alternative zu der Antwort SnareChops gab.

    Die Sie verwenden können .bind(this) in Ihre Vorlage, um die gleiche Wirkung haben. Es ist vielleicht nicht so sauber, aber es spart ein paar Zeilen. Momentan bin ich auf eckige 2.4.0

    @Component({
  ...
  template: '<child [myCallback]="theCallback.bind(this)"></child>',
  directives: [ChildComponent]
})
export class ParentComponent {

  public theCallback(){
    ...
  }
}

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

    InformationsquelleAutor der Antwort Max Fahl

  4. 2

    Als Beispiel, ich bin mit einem login-modal-Fenster, wo das modale Fenster ist die Muttergesellschaft, die das login-Formular ist das Kind und die login-Schaltfläche ruft zurück, um den modal Eltern schließen-Funktion.

    Den Eltern modal enthält die Funktion zum schließen des modalen. Dieser Elternteil übergibt die schließen-Funktion auf der login-Kind-Komponente.

    import { Component} from '@angular/core';
import { LoginFormComponent } from './login-form.component'

@Component({
  selector: 'my-modal',
  template: `<modal #modal>
      <login-form (onClose)="onClose($event)" ></login-form>
    </modal>`
})
export class ParentModalComponent {
  modal: {...};

  onClose() {
    this.modal.close();
  }
}

    Nachdem das Kind die login-Komponente sendet das login Formular, es schließt sich die Eltern modal mithilfe der Eltern, die callback-Funktion

    import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'login-form',
  template: `<form (ngSubmit)="onSubmit()" #loginForm="ngForm">
      <button type="submit">Submit</button>
    </form>`
})
export class ChildLoginComponent {
  @Output() onClose = new EventEmitter();
  submitted = false;

  onSubmit() {
    this.onClose.emit();
    this.submitted = true;
  }
}

    InformationsquelleAutor der Antwort Camilla Kydland

  5. -4

    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; 
  ...
}

    InformationsquelleAutor der Antwort Blue

Schreibe einen Kommentar