Функция обратного вызова углового прохода для дочернего компонента как @Input аналогично AngularJS

AngularJS имеет параметры &, где вы можете передать обратный вызов в директиву (например, способ обратных вызовов AngularJS . Можно ли передать обратный вызов как @Inputдля углового компонента (что-то вроде ниже)? Если нет, то что было бы ближе всего к тому, что 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>

Я думаю, что это плохое решение. Если вы хотите передать функцию в компонент @Input(), @Output()декоратор - это то, что вы ищете.

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>

ОБНОВИТЬ

Этот ответ был представлен, когда Angular 2 еще находился в альфа-версии, и многие функции были недоступны / недокументированы. Хотя приведенное ниже будет работать, этот метод полностью устарел. Я сильно рекомендую принятый ответ ниже.

Оригинальный ответ

Да, на самом деле это так, однако вы захотите убедиться, что это правильно. Для этого я использовал свойство, гарантирующее то, thisчто я хочу.

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

Альтернативу ответу SnareChops дал.

Вы можете использовать .bind (this) в своем шаблоне, чтобы получить тот же эффект. Это может быть не так чисто, но это экономит пару строк. Я в настоящее время на угловой 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; 
  ...
}

В некоторых случаях может потребоваться выполнение бизнес-логики родительским компонентом. В приведенном ниже примере у нас есть дочерний компонент, который отображает строку таблицы в зависимости от логики, предоставленной родительским компонентом:

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

Итак, я хотел продемонстрировать 2 вещи здесь:

1. Толстая стрелка (=>) работает вместо .bind (this) для хранения правильного контекста;
2. Безопасное объявление функции обратного вызова в дочернем компоненте.

В качестве примера, я использую модальное окно входа в систему, где модальное окно является родителем, форма входа в систему является дочерним, а кнопка входа вызывает функцию закрытия модального родителя.

Родительский модал содержит функцию закрытия модального режима. Этот родительский элемент передает функцию close дочернему компоненту login.

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

После того, как дочерний компонент входа в систему отправляет форму входа в систему, он закрывает родительский модальный режим с помощью функции обратного вызова родителя.

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

Альтернатива ответу Максу Фалу.

Вы можете определить функцию обратного вызова как функцию стрелки в родительском компоненте, так что вам не нужно будет связывать это.

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

Передача метода с аргументом, используя .bind внутри шаблона

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

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

  @Input()
  public action: Function; 

  ...
}

Используйте наблюдаемый шаблон. Вы можете поместить значение Observable (не Subject) во входной параметр и управлять им из родительского компонента. Вам не нужна функция обратного вызова.

Смотрите пример: https://stackoverflow.com/a/49662611/4604351

Еще одна альтернатива.

ОП спросил способ использования обратного вызова. В этом случае он имел в виду конкретно функцию, которая обрабатывает событие (в его примере: событие щелчка), которое должно рассматриваться как принятый ответ от @serginho: with @Outputи EventEmitter.

Однако существует разница между обратным вызовом и событием: с помощью обратного вызова ваш дочерний компонент может получить некоторую обратную связь или информацию от родителя, но только событие может сообщить, что что-то произошло, не ожидая никакой обратной связи.

Есть случаи, когда необходима обратная связь, напр. получить цвет или список элементов, которые компонент должен обработать. Вы можете использовать связанные функции, как предлагали некоторые ответы, или вы можете использовать интерфейсы (это всегда мое предпочтение).

пример

Предположим, у вас есть общий компонент, работающий со списком элементов {id, name}, который вы хотите использовать со всеми таблицами базы данных, в которых есть эти поля. Этот компонент должен:

• получить диапазон элементов (страницы) и показать их в списке
• разрешить удалить элемент
• сообщить, что элемент был нажат, чтобы родитель мог предпринять некоторые действия.
• Позволяет получить следующую страницу элементов.

Дочерний компонент

При обычном связывании нам понадобятся 1 @Input()и 3 @Output()параметра (но без обратной связи с родителем). Ex. <list-ctrl [items]="list" (itemClicked)="click($event)" (itemRemoved)="removeItem($event)" (loadNextPage)="load($event)" ...>Но для создания интерфейса нам понадобится только одно @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); 
    }
}

Родительский компонент

Теперь мы можем использовать компонент list в родительском элементе.

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

Обратите внимание, что <list-ctrl>получаетthis (родительский компонент) как объект обратного вызова. Еще одно преимущество заключается в том, что отправка родительского экземпляра не требуется, это может быть служба или любой объект, который реализует интерфейс, если это позволяет ваш сценарий использования.

Полный пример этого стекаблита .

Текущий ответ может быть упрощен до ...

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