Angular2将callback函数作为@Input传递给子组件

AngularJS有＆参数，你可以传递一个callback到一个指令（例如AngularJScallback方式 。是否可以传递一个callback作为一个@Input组件的一个@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> 

Answer 1

我认为这是一个不好的解决scheme。 如果你想通过@Input()传递一个函数到组件中， @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> 

Answer 2

UPDATE

这个答案是在Angular 2仍然在alpha的时候提交的，许多function都不可用/没有logging。 虽然下面仍然有效，但这种方法现在完全过时了。 我强烈build议在下面接受的答案。

原始答复

是的，事实上，但是你会想确保它的范围是正确的。 为此，我使用了一个属性来确保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给出的答案的一个替代scheme。

您可以在模板中使用.bind（this）来获得相同的效果。 它可能不那么干净，但可以节省几行。 我目前在angular2.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

作为一个例子，我使用了一个login模式窗口，其中模式窗口是父窗口，login窗体是子窗口，loginbuttoncallback模态父窗口的closuresfunction。

父模态包含closures模态的function。 此父级将closuresfunction传递给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(); } } 

子login组件提交login表单后，使用父级的callback函数closures父模块

 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 5

目前的答案可以简化为…

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