如何设置一个箭头样式的函数作为Input()的默认参数

Question

我有一个组件，它在一个表中显示数据行。我有一个输入的函数，应该运行，如果有人双击一行。我想把它默认为对路由器做一些事情。

@Input() rowDoubleClickedFunction: (result: T) => void = this.routeToDetailsPage;
private routeToDetailsPage(result: T) {
this.router.navigate(['route here']);
}

这个缩写是为了使意思更清楚。在进行路由器调用之前，我在函数中做了一些其他的事情。但是一旦我将底部函数更改为箭头语法:

@Input() rowDoubleClickedFunction: (result: T) => void = this.routeToDetailsPage;
private routeToDetailsPage = (result: T) => {
//Something more complicated with "this" which necessitates using arrow syntax        
this.router.navigate(['route composed from code above']);
};

我得到一个错误:属性' routetodetailpage '在初始化之前被使用。ts(2729)

这似乎不是衬里的问题。有办法吗，还是我运气不好?

Answer 1

类字段按顺序求值。你做

@Input()
public rowDoubleClickedFunction = this.routeToDetailsPage;
private routeToDetailsPage = …;

在初始化routeToDetailsPage属性之前访问它。把它们翻过来:

private routeToDetailsPage = (result: T) => {
…
};
@Input()
rowDoubleClickedFunction: (result: T) => void = this.routeToDetailsPage;

或者如果你没有在其他地方使用routeToDetailsPage，就把它完全去掉，只写

@Input()
rowDoubleClickedFunction: (result: T) => void = (result: T) => {
…
};