Angular 将回调函数作为 @Input 传递给子组件，类似于 AngularJS 的方式

小编典典

Angular 将回调函数作为 @Input 传递给子组件，类似于 AngularJS 的方式

all

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>

阅读 110

2022-04-26

共1个答案

小编典典

我认为这是一个糟糕的解决方案。如果您想将 Function 传递给带有的组件@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>

2022-04-26