Fonction de rappel de passage angulaire au composant enfant en tant que @Input similaire à la méthode AngularJS

AngularJS a les paramètres & où vous pouvez passer un rappel à une directive (par exemple, le mode de rappel AngularJS . Est-il possible de passer un rappel en tant que @Inputpour un composant angulaire (quelque chose comme ci-dessous)? Sinon, quelle serait la chose la plus proche de AngularJS le fait?

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

Je pense que c'est une mauvaise solution. Si vous voulez passer une fonction en composant avec @Input(), le @Output()décorateur est ce que vous recherchez.

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>

METTRE À JOUR

Cette réponse a été soumise alors que Angular 2 était encore en alpha et que de nombreuses fonctionnalités n'étaient pas disponibles / non documentées. Bien que ce qui suit fonctionnera toujours, cette méthode est désormais entièrement obsolète. Je recommande fortement la réponse acceptée ci-dessous.

Réponse originale

Oui, c'est le cas, mais vous voudrez vous assurer qu'il est correctement défini. Pour cela, j'ai utilisé une propriété pour garantir que cela thissignifie ce que je veux.

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

Une alternative à la réponse donnée par SnareChops.

Vous pouvez utiliser .bind (this) dans votre modèle pour avoir le même effet. Il n'est peut-être pas aussi propre, mais il enregistre quelques lignes. Je suis actuellement sur angular 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; 
  ...
}

Dans certains cas, vous devrez peut-être exécuter la logique métier par un composant parent. Dans l'exemple ci-dessous, nous avons un composant enfant qui rend la ligne du tableau en fonction de la logique fournie par le composant parent:

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

Donc, je voulais démontrer 2 choses ici:

1. La grosse flèche (=>) fonctionne à la place de .bind (this) pour maintenir le bon contexte;
2. Déclaration de typesafe d'une fonction de rappel dans le composant enfant.

À titre d'exemple, j'utilise une fenêtre modale de connexion, où la fenêtre modale est le parent, le formulaire de connexion est l'enfant et le bouton de connexion rappelle la fonction de fermeture du parent modal.

Le modal parent contient la fonction pour fermer le modal. Ce parent transmet la fonction close au composant enfant de connexion.

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

Une fois que le composant de connexion enfant a soumis le formulaire de connexion, il ferme le modal parent à l'aide de la fonction de rappel du parent

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

Une alternative à la réponse donnée par Max Fahl.

Vous pouvez définir la fonction de rappel comme une fonction de flèche dans le composant parent afin que vous n'ayez pas besoin de le lier.

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

Passer la méthode avec l'argument, en utilisant .bind à l'intérieur du modèle

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

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

  @Input()
  public action: Function; 

  ...
}

Utilisez un motif observable. Vous pouvez mettre une valeur observable (non soumise) dans le paramètre d'entrée et la gérer à partir du composant parent. Vous n'avez pas besoin de fonction de rappel.

Voir l'exemple: https://stackoverflow.com/a/49662611/4604351

Une autre alternative.

L'OP a demandé un moyen d'utiliser un rappel. Dans ce cas, il faisait spécifiquement référence à une fonction qui traite un événement (dans son exemple: un événement de clic), qui doit être traitée comme la réponse acceptée de @serginho le suggère: avec @Outputet EventEmitter.

Cependant, il existe une différence entre un rappel et un événement: avec un rappel, votre composant enfant peut récupérer des commentaires ou des informations du parent, mais un événement peut uniquement informer que quelque chose s'est produit sans attendre de retour.

Il existe des cas d'utilisation où une rétroaction est nécessaire, par ex. obtenir une couleur ou une liste d'éléments que le composant doit gérer. Vous pouvez utiliser des fonctions liées comme certaines réponses l'ont suggéré, ou vous pouvez utiliser des interfaces (c'est toujours ma préférence).

Exemple

Supposons que vous ayez un composant générique qui opère sur une liste d'éléments {id, nom} que vous souhaitez utiliser avec toutes vos tables de base de données qui contiennent ces champs. Cette composante devrait:

• récupérer une gamme d'éléments (page) et les afficher dans une liste
• permettre de supprimer un élément
• informer qu'un élément a été cliqué, afin que le parent puisse prendre des mesures.
• permet de récupérer la page suivante des éléments.

Composant enfant

En utilisant une liaison normale, nous aurions besoin de 1 @Input()et 3 @Output()paramètres (mais sans aucun retour du parent). Ex. <list-ctrl [items]="list" (itemClicked)="click($event)" (itemRemoved)="removeItem($event)" (loadNextPage)="load($event)" ...>, mais pour créer une interface, nous n'en aurons besoin que d'une seule @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); 
    }
}

Composant parent

Nous pouvons maintenant utiliser le composant liste dans le parent.

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

Notez que le <list-ctrl>reçoit this(composant parent) en tant qu'objet de rappel. Un avantage supplémentaire est qu'il n'est pas nécessaire d'envoyer l'instance parente, il peut s'agir d'un service ou de tout objet qui implémente l'interface si votre cas d'utilisation le permet.

L'exemple complet se trouve sur ce stackblitz .

La réponse actuelle peut être simplifiée en ...

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