Typescript Angular 将回调函数作为 @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>

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>

Typescript相关问答推荐

判断对象A中存在的对象B的键是否存在对象A中键的另一个数组值中

typescript抱怨值可以是未定义的，尽管类型没有定义

将props传递给子组件并有条件地呈现它''

HttpClient中的文本响应类型选项使用什么编码？''

编剧错误：正在等待Expect(Locator).toBeVisible()

如何在react组件中使用doctype和html标签？

在VSCode中显示eslint错误，但在终端中运行eslint命令时不显示？(Vite，React，TypeScript)

基于泛型的条件接口键

如何创建由空格连接的多个字符串的类型

类型推断对React.ForwardRef()的引用参数无效

TypeScrip：使用Union ToInterval辅助对象，但保留子表达式

如何编辑切片器以使用CRUD调用函数？

接受字符串或数字的排序函数

有没有什么方法可以使用ProvideState()提供多个削减器作为根减减器

如何调整项目数组，但允许权重影响顺序

Typescript不允许在数组中使用联合类型

Typescript泛型调用对象'；s方法

如何知道使用TypeScript时是否在临时工作流内运行

必须从注入上下文调用Angular ResolveFn-inject()

我可以使用对象属性的名称作为对象中的字符串值吗？