Angular：将箭头函数设为@Input()默认参数时出现初始化报错怎么办？

当你把默认函数从普通原型方法改成箭头函数（实例属性）时，TypeScript会抛出Property 'routeToDetailsPage' is used before its initialization.ts(2729)错误，核心原因是类字段的初始化顺序严格遵循代码书写顺序：

• 普通函数是类的原型方法，在类定义阶段就已存在，因此可以提前引用；
• 箭头函数作为实例字段，必须等到代码执行到它的声明位置时才会初始化，而你先声明了rowDoubleClickedFunction并试图赋值this.routeToDetailsPage，此时后者还未初始化，导致报错。

以下是三种可行的解决方法：

• 方法一：调整字段声明顺序
  把箭头函数字段放在@Input字段之前，确保赋值时箭头函数已完成初始化：

  import { Component, Input } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html'
  })
  export class DataTableComponent<T> {
    private routeToDetailsPage = (result: T) => {
        // 依赖this的复杂逻辑
        this.router.navigate(['details', result['id']]);
    };
  
    @Input() rowDoubleClickedFunction: (result: T) => void = this.routeToDetailsPage;
  
    constructor(private router: Router) {}
  }
  

• 方法二：利用ngOnInit钩子设置默认值
  先将@Input设为可选，在组件初始化完成后再赋值默认函数，同时确保依赖（如Router）已完成注入：

  import { Component, Input, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html'
  })
  export class DataTableComponent<T> implements OnInit {
    @Input() rowDoubleClickedFunction?: (result: T) => void;
  
    private routeToDetailsPage = (result: T) => {
        // 依赖this的复杂逻辑
        this.router.navigate(['details', result['id']]);
    };
  
    constructor(private router: Router) {}
  
    ngOnInit(): void {
        if (!this.rowDoubleClickedFunction) {
            this.rowDoubleClickedFunction = this.routeToDetailsPage;
        }
    }
  }
  

• 方法三：直接内联箭头函数作为默认值
  如果默认逻辑不需要复用，可以直接把箭头函数写在@Input的默认值定义中：

  import { Component, Input } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html'
  })
  export class DataTableComponent<T> {
    @Input() rowDoubleClickedFunction: (result: T) => void = (result: T) => {
        // 依赖this的复杂逻辑
        this.router.navigate(['details', result['id']]);
    };
  
    constructor(private router: Router) {}
  }
  

内容的提问来源于stack exchange，提问作者Brian Davis