作为@Input的子组件的角度传递回调函数

Question

AngularJS有&参数,你可以将回调传递给指令(例如AngularJS的回调方式.是否可以将回调作为@InputAngular组件传递(如下所示)？如果不是,最接近什么是什么？ 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>

Answer 1

我认为这是一个糟糕的解决方案.如果你想将一个Function传递给组件@Input(),@Output()decorator就是你要找的.

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>

Answer 2

UPDATE

当Angular 2仍处于alpha状态并且许多功能不可用/未记录时,提交了此答案.虽然以下仍然可行,但这种方法现在已经过时了.我强烈建议接受以下答复.

原始答案

是的,实际上是,但是你需要确保它的范围是正确的.为此,我使用了一个属性来确保这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; 
  ...
}

Answer 3

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

Answer 4

在某些情况下，您可能需要由父组件执行业务逻辑。在下面的示例中，我们有一个子组件，该组件根据父组件提供的逻辑来渲染表行：

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

因此，我想在这里演示两件事：

1. 粗箭头（=>）代替.bind（this）函数来保存正确的上下文；
2. 子组件中回调函数的Typesafe声明。

Answer 5

Max Fahl 给出的答案的另一种选择。

您可以在父组件中将回调函数定义为箭头函数，这样您就不需要绑定它。

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

Answer 6

例如，我使用的是登录模式窗口，其中模式窗口是父窗口，登录表单是子窗口，而登录按钮则回调到模式父窗口的关闭功能。

父模态包含关闭模态的功能。此父级将close函数传递给登录子级组件。

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

Answer 7

使用模板内部的 .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; 

  ...
}

Answer 8

以下是我在 Angular 13 中的工作（截至 2022 年 3 月）。

\n

PS-这或多或少与其他人的回答相似。添加这个答案只是为了让人们知道它在 Angular 13 中有效。

\n

将函数定义为平面箭头，而不是父组件中的常规函数​​。

\n

callBackFn= (args: string): void => {\n  // callback code here\n  // This will work (Flat Arrow)\n}\n// callbackFn(args: string): void {\n//   //This type of definition will not work.\n// }\n

\n

将回调函数作为属性传递给子组件

\n

<app-child [callBack]=\xe2\x80\x9dcallBackFn\xe2\x80\x9d></app-child>\n

\n

在子组件中接收回调函数作为输入。该定义应与父级中的定义匹配。

\n

@Input() callBack: (args: string) => void;\n

\n

然后在子组件中调用这个函数。您也可以将此称为子组件模板。

\n

this.callBack(\'Test\');\n

\n

或者

\n

<button (click)="callBack(\'Test\')"></button>\n

\n

但不确定这个方法好不好。\n我在 ReactJS 中看到了类似的方法，它效果很好，但仍然不确定它在 Angular 中是如何工作的以及它的影响是什么。

\n

对这种方法的任何评论将不胜感激。

\n