Angular Pass-Rückruffunktion an untergeordnete Komponente als @Input ähnlich wie bei AngularJS

AngularJS verfügt über die & -Parameter, mit denen Sie einen Rückruf an eine Direktive übergeben können (z. B. AngularJS-Methode für Rückrufe . Ist es möglich, einen Rückruf als @Inputfür eine Angular-Komponente zu übergeben (so etwas wie unten)? Wenn nicht, was wäre dem am nächsten? AngularJS macht?

@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 an eine Komponente mit übergeben möchten @Input(), ist @Output()Decorator genau 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>

AKTUALISIEREN

Diese Antwort wurde übermittelt, als Angular 2 noch in Alpha war und viele der Funktionen nicht verfügbar / nicht dokumentiert waren. Während das Folgende noch funktioniert, ist diese Methode jetzt völlig veraltet. Ich empfehle dringend die akzeptierte Antwort über die unten.

Ursprüngliche Antwort

Ja, in der Tat, aber Sie sollten sicherstellen, dass der Umfang korrekt ist. Dafür habe ich eine Eigenschaft verwendet, um sicherzustellen, dass dies thisbedeutet, was ich möchte.

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

Eine Alternative zur Antwort von SnareChops.

Sie können .bind (this) in Ihrer Vorlage verwenden, um den gleichen Effekt zu erzielen. Es ist vielleicht nicht so sauber, aber es spart ein paar Zeilen. Ich bin derzeit auf Winkel 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; 
  ...
}

In einigen Fällen muss die Geschäftslogik möglicherweise von einer übergeordneten Komponente ausgeführt werden. Im folgenden Beispiel haben wir eine untergeordnete Komponente, die Tabellenzeilen abhängig von der von der übergeordneten Komponente bereitgestellten Logik rendert:

@Component({
  ...
  template: '<table-component [getRowColor]="getColor"></table-component>',
  directives: [TableComponent]
})
export class ParentComponent {

 // Pay attention on the way this function is declared. Using fat arrow (=>) declaration 
 // we can 'fixate' the context of `getColor` function
 // so that it is bound to ParentComponent as if .bind(this) was used.
 getColor = (row: Row) => {
    return this.fancyColorService.getUserFavoriteColor(row);
 }

}

@Component({...})
export class TableComponent{
  // This will be bound to the ParentComponent.getColor. 
  // I found this way of declaration a bit safer and convenient than just raw Function declaration
  @Input('getRowColor') getRowColor: (row: Row) => Color;

  renderRow(){
    ....
    // Notice that `getRowColor` function holds parent's context because of a fat arrow function used in the parent
    const color = this.getRowColor(row);
    renderRow(row, color);
  }
}

Also wollte ich hier zwei Dinge demonstrieren:

1. Der fette Pfeil (=>) funktioniert anstelle von .bind (this), um den richtigen Kontext zu halten.
2. Typesichere Deklaration einer Rückruffunktion in der untergeordneten Komponente.

Als Beispiel verwende ich ein modales Anmeldefenster, in dem das modale Fenster das übergeordnete Element, das Anmeldeformular das untergeordnete Fenster und die Anmeldeschaltfläche die Schließfunktion des modalen übergeordneten Elements aufruft.

Das übergeordnete Modal enthält die Funktion zum Schließen des Modals. Dieses übergeordnete Element übergibt die Funktion zum Schließen an die untergeordnete Anmeldekomponente.

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 die untergeordnete Anmeldekomponente das Anmeldeformular gesendet hat, schließt sie das übergeordnete Modal mithilfe der Rückruffunktion des übergeordneten Elements

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

Eine Alternative zu der Antwort, die Max Fahl gab.

Sie können die Rückruffunktion als Pfeilfunktion in der übergeordneten Komponente definieren, damit Sie diese nicht binden müssen.

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

   // unlike this, public theCallback(){
   public theCallback = () => {
    ...
  }
}

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

Übergabe der Methode mit Argument unter Verwendung von .bind in der Vorlage

@Component({
  ...
  template: '<child [action]="foo.bind(this, 'someArgument')"></child>',
  ...
})
export class ParentComponent {
  public foo(someParameter: string){
    ...
  }
}

@Component({...})
export class ChildComponent{

  @Input()
  public action: Function; 

  ...
}

Verwenden Sie das beobachtbare Muster. Sie können den Wert Observable (nicht Subject) in den Eingabeparameter einfügen und über die übergeordnete Komponente verwalten. Sie benötigen keine Rückruffunktion.

Siehe Beispiel: https://stackoverflow.com/a/49662611/4604351

Eine andere Alternative.

Das OP fragte nach einer Möglichkeit, einen Rückruf zu verwenden. In diesem Fall bezog er sich speziell auf eine Funktion, die ein Ereignis verarbeitet (in seinem Beispiel: ein Klickereignis), die wie die von @serginho akzeptierte Antwort behandelt werden soll: mit @Outputund EventEmitter.

Es gibt jedoch einen Unterschied zwischen einem Rückruf und einem Ereignis: Mit einem Rückruf kann Ihre untergeordnete Komponente Feedback oder Informationen vom übergeordneten Element abrufen, ein Ereignis kann jedoch nur darüber informieren, dass etwas passiert ist, ohne dass ein Feedback erwartet wird.

Es gibt Anwendungsfälle, in denen eine Rückmeldung erforderlich ist, z. Holen Sie sich eine Farbe oder eine Liste von Elementen, die die Komponente verarbeiten muss. Sie können gebundene Funktionen verwenden, wie einige Antworten vorgeschlagen haben, oder Sie können Schnittstellen verwenden (das ist immer meine Präferenz).

Beispiel

Angenommen, Sie haben eine generische Komponente, die eine Liste von Elementen {id, name} verarbeitet, die Sie für alle Datenbanktabellen mit diesen Feldern verwenden möchten. Diese Komponente sollte:

• Rufen Sie eine Reihe von Elementen (Seite) ab und zeigen Sie sie in einer Liste an
• Erlaube das Entfernen eines Elements
• Informieren Sie, dass auf ein Element geklickt wurde, damit das übergeordnete Element einige Aktionen ausführen kann.
• Ermöglichen das Abrufen der nächsten Seite mit Elementen.

Untergeordnete Komponente

Bei normaler Bindung benötigen wir 1 @Input()und 3 @Output()Parameter (jedoch ohne Rückmeldung des Elternteils). Ex. <list-ctrl [items]="list" (itemClicked)="click($event)" (itemRemoved)="removeItem($event)" (loadNextPage)="load($event)" ...>, aber für die Erstellung einer Schnittstelle benötigen wir nur eine @Input():

import {Component, Input, OnInit} from '@angular/core';

export interface IdName{
  id: number;
  name: string;
}

export interface IListComponentCallback<T extends IdName> {
    getList(page: number, limit: number): Promise< T[] >;
    removeItem(item: T): Promise<boolean>;
    click(item: T): void;
}

@Component({
    selector: 'list-ctrl',
    template: `
      <button class="item" (click)="loadMore()">Load page {{page+1}}</button>
      <div class="item" *ngFor="let item of list">
          <button (click)="onDel(item)">DEL</button>
          <div (click)="onClick(item)">
            Id: {{item.id}}, Name: "{{item.name}}"
          </div>
      </div>
    `,
    styles: [`
      .item{ margin: -1px .25rem 0; border: 1px solid #888; padding: .5rem; width: 100%; cursor:pointer; }
      .item > button{ float: right; }
      button.item{margin:.25rem;}
    `]
})
export class ListComponent implements OnInit {
    @Input() callback: IListComponentCallback<IdName>; // <-- CALLBACK
    list: IdName[];
    page = -1; 
    limit = 10;

    async ngOnInit() {
      this.loadMore();
    }
    onClick(item: IdName) {
      this.callback.click(item);   
    }
    async onDel(item: IdName){ 
        if(await this.callback.removeItem(item)) {
          const i = this.list.findIndex(i=>i.id == item.id);
          this.list.splice(i, 1);
        }
    }
    async loadMore(){
      this.page++;
      this.list = await this.callback.getList(this.page, this.limit); 
    }
}

Übergeordnete Komponente

Jetzt können wir die Listenkomponente im übergeordneten Element verwenden.

import { Component } from "@angular/core";
import { SuggestionService } from "./suggestion.service";
import { IdName, IListComponentCallback } from "./list.component";

type Suggestion = IdName;

@Component({
  selector: "my-app",
  template: `
    <list-ctrl class="left" [callback]="this"></list-ctrl>
    <div class="right" *ngIf="msg">{{ msg }}<br/><pre>{{item|json}}</pre></div>
  `,
  styles:[`
    .left{ width: 50%; }
    .left,.right{ color: blue; display: inline-block; vertical-align: top}
    .right{max-width:50%;overflow-x:scroll;padding-left:1rem}
  `]
})
export class ParentComponent implements IListComponentCallback<Suggestion> {
  msg: string;
  item: Suggestion;

  constructor(private suggApi: SuggestionService) {}

  getList(page: number, limit: number): Promise<Suggestion[]> {
    return this.suggApi.getSuggestions(page, limit);
  }
  removeItem(item: Suggestion): Promise<boolean> {
    return this.suggApi.removeSuggestion(item.id)
      .then(() => {
        this.showMessage('removed', item);
        return true;
      })
      .catch(() => false);
  }
  click(item: Suggestion): void {
    this.showMessage('clicked', item);
  }
  private showMessage(msg: string, item: Suggestion) {
    this.item = item;
    this.msg = 'last ' + msg;
  }
}

Beachten Sie, dass der <list-ctrl>Empfang this(übergeordnete Komponente) das Rückrufobjekt ist. Ein zusätzlicher Vorteil besteht darin, dass die übergeordnete Instanz nicht gesendet werden muss. Es kann sich um einen Dienst oder ein Objekt handeln, das die Schnittstelle implementiert, sofern Ihr Anwendungsfall dies zulässt.

Das vollständige Beispiel finden Sie auf diesem Stackblitz .

Die aktuelle Antwort kann vereinfacht werden, um ...

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