Función de devolución de llamada de paso angular al componente secundario como @Input similar a la forma AngularJS

AngularJS tiene los parámetros & donde puede pasar una devolución de llamada a una directiva (por ejemplo, la forma de devolución de llamada de AngularJS . ¿Es posible pasar una devolución de llamada como un @Inputcomponente angular (algo como a continuación)? Si no, ¿qué sería lo más parecido a qué? AngularJS hace?

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

Creo que es una mala solución. Si desea pasar una Función a un componente con @Input(), @Output()decorador es lo que está buscando.

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>

ACTUALIZAR

Esta respuesta se envió cuando Angular 2 todavía estaba en alfa y muchas de las características no estaban disponibles / indocumentadas. Si bien lo siguiente seguirá funcionando, este método ahora está completamente desactualizado. Recomiendo encarecidamente la respuesta aceptada a continuación.

Respuesta original

Sí, de hecho lo es, sin embargo, querrás asegurarte de que tenga un alcance correcto. Para esto, he usado una propiedad para asegurar que eso thissignifica lo que quiero.

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

Una alternativa a la respuesta que SnareChops dio.

Puede usar .bind (this) en su plantilla para tener el mismo efecto. Puede que no sea tan limpio pero ahorra un par de líneas. Actualmente estoy en 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; 
  ...
}

En algunos casos, es posible que necesite que un componente principal realice la lógica de negocios. En el siguiente ejemplo, tenemos un componente secundario que representa la fila de la tabla dependiendo de la lógica proporcionada por el componente principal:

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

Entonces, quería demostrar 2 cosas aquí:

1. Fat arrow (=>) funciona en lugar de .bind (this) para mantener el contexto correcto;
2. Declaración typesafe de una función de devolución de llamada en el componente secundario.

Como ejemplo, estoy usando una ventana modal de inicio de sesión, donde la ventana modal es la principal, el formulario de inicio de sesión es el secundario y el botón de inicio de sesión llama a la función de cierre de la principal modal.

El modal padre contiene la función para cerrar el modal. Este padre pasa la función de cierre al componente hijo de inicio de sesión.

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

Después de que el componente de inicio de sesión secundario envíe el formulario de inicio de sesión, cierra el modal principal mediante la función de devolución de llamada principal

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

Una alternativa a la respuesta que dio Max Fahl.

Puede definir la función de devolución de llamada como una función de flecha en el componente principal para que no necesite vincular eso.

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

Pasar método con argumento, usando .bind dentro de la plantilla

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

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

  @Input()
  public action: Function; 

  ...
}

Usar patrón observable. Puede poner el valor Observable (no Asunto) en el parámetro de entrada y administrarlo desde el componente principal. No necesita la función de devolución de llamada.

Ver ejemplo: https://stackoverflow.com/a/49662611/4604351

Otra alternativa

El OP solicitó una forma de usar una devolución de llamada. En este caso, se refería específicamente a una función que procesa un evento (en su ejemplo: un evento de clic), que se tratará como la respuesta aceptada de @serginho sugiere: con @Outputy EventEmitter.

Sin embargo, hay una diferencia entre una devolución de llamada y un evento: con una devolución de llamada, su componente hijo puede recuperar algunos comentarios o información del padre, pero un evento solo puede informar que algo sucedió sin esperar ningún comentario.

Hay casos de uso donde es necesaria una retroalimentación, ej. obtener un color o una lista de elementos que el componente necesita manejar. Puede usar funciones enlazadas como sugieren algunas respuestas, o puede usar interfaces (esa es siempre mi preferencia).

Ejemplo

Supongamos que tiene un componente genérico que opera sobre una lista de elementos {id, name} que desea usar con todas las tablas de la base de datos que tienen estos campos. Este componente debe:

• recuperar un rango de elementos (página) y mostrarlos en una lista
• permitir eliminar un elemento
• informar que se hizo clic en un elemento, para que el padre pueda tomar algunas acciones.
• permitir recuperar la siguiente página de elementos.

Componente hijo

Usando el enlace normal necesitaríamos 1 @Input()y 3 @Output()parámetros (pero sin ningún comentario del padre). Ex. <list-ctrl [items]="list" (itemClicked)="click($event)" (itemRemoved)="removeItem($event)" (loadNextPage)="load($event)" ...>, pero al crear una interfaz solo necesitaremos una @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); 
    }
}

Componente principal

Ahora podemos usar el componente de lista en el padre.

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

Tenga en cuenta que <list-ctrl>recibe this(componente principal) como el objeto de devolución de llamada. Una ventaja adicional es que no es necesario enviar la instancia principal, puede ser un servicio o cualquier objeto que implemente la interfaz si su caso de uso lo permite.

El ejemplo completo está en este stackblitz .

La respuesta actual se puede simplificar a ...

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