Angular中showPopup is not a function报错的修复方法咨询

问题背景 #

我有一个用于显示弹窗的EmployeePopup类，调用其show方法时控制台抛出类型错误，提示this.showPopup is not a function。

EmployeePopup类代码 #

export class EmployeePopup {
    // Angular workaround
    public showPopup: (employeeId: string) => Promise<void>;

    constructor() {}

    public show(employee: Employee): Promise<void> {
        return this.showPopup(employee.id);
    }
}

调用代码 #

private showEmployee(options: {
        employee: Employee;
        changeUrl?: boolean;
    }): void {
        if (options.changeUrl) {
            const employeeIdKey = this.getEmployeeIdUrlKey();
            const query = QueryParser.buildQueryString([
                { key: employeeIdKey, value: options.employee.id },
            ]);
            UserHistory.set(query);
        }

        this.employeePopup.show(options.employee).then(() => {
            if (this.orgChart.visible) {
                this.orgChart.sendToBack();
            }
        });
    }

错误信息 #

Uncaught TypeError: this.showPopup is not a function
at push../js/modules/popup/employee/EmployeePopup.ts.EmployeePopup.show
(EmployeePopup.ts:12:21)
at push../js/modules/page/employee/EmployeeController.ts.EmployeeController.showEmployee
(EmployeeController.ts:184:28)
at push../js/modules/page/employee/EmployeeController.ts.EmployeeController.getAndShowEmployee
(EmployeeController.ts:138:18)

修复方案 #

错误根源是EmployeePopup类仅声明了showPopup的类型，但从未给它赋值实际的函数实现或引用，导致调用时this.showPopup为undefined。根据不同场景，有两种常见修复方式：

方式1：补全showPopup的内部实现 #

如果showPopup应该是类自身的方法，直接编写弹窗逻辑：

export class EmployeePopup {
    constructor() {}

    // 替换类型声明为实际函数实现
    public showPopup(employeeId: string): Promise<void> {
        // 这里编写弹窗具体逻辑，比如调用Angular弹窗组件
        return new Promise((resolve) => {
            // 示例：打开弹窗，关闭后触发resolve
            // const dialogRef = this.dialog.open(EmployeeDetailComponent, { data: { employeeId } });
            // dialogRef.afterClosed().subscribe(() => resolve());
        });
    }

    public show(employee: Employee): Promise<void> {
        return this.showPopup(employee.id);
    }
}

方式2：确保showPopup在调用前被外部赋值 #

如果注释里的"Angular workaround"指从外部注入或赋值showPopup，需保证调用show方法前完成赋值：

1. 在实例化EmployeePopup的位置，给showPopup赋值对应函数：

// 比如在Angular组件中
this.employeePopup = new EmployeePopup();
// 赋值实际弹窗逻辑，比如调用服务方法
this.employeePopup.showPopup = (employeeId) => {
    return this.employeeDialogService.open(employeeId);
};

2. 若依赖视图组件，确保在ngAfterViewInit生命周期钩子之后再调用show方法。

内容的提问来源于stack exchange，提问作者Eugene Sukh