Angular 4：调用AlertService确认后请求REST服务报Cannot read property 'http'错误

这个错误我太熟悉了——根本不是AlertService没声明http，而是回调函数里的this指向跑偏了！当你在alertService.confirm()的确认回调里写this.http时，这里的this已经不是你的InspectionService实例了，自然找不到http属性。

下面给你几个靠谱的解决办法，按推荐程度排序：

1. 用箭头函数（最简洁的Angular风格） #

箭头函数会自动捕获外层上下文的this，直接把回调改成箭头函数就能搞定：

// 在你的inspection.service.ts里
this.alertService.confirm(
  '确认执行操作',
  '确定要发起这个REST请求吗？',
  () => { // 这里用箭头函数
    // 现在this正确指向InspectionService实例
    this.http.post('/api/your-target-endpoint', yourPayload)
      .subscribe({
        next: (res) => { /* 处理成功响应 */ },
        error: (err) => { /* 处理错误 */ }
      });
  }
);

2. 提前保存this的引用 #

如果习惯用普通函数回调，就先把当前服务的this存成一个变量（比如self），在回调里用这个变量访问http：

// 在你的inspection.service.ts里
const self = this; // 先存好当前的this
this.alertService.confirm(
  '确认执行操作',
  '确定要发起这个REST请求吗？',
  function() { // 普通函数回调
    self.http.post('/api/your-target-endpoint', yourPayload)
      .subscribe(...); // 用self代替this
  }
);

3. 用bind()绑定this #

把回调函数的this强行绑定到你的服务实例上：

// 在你的inspection.service.ts里
this.alertService.confirm(
  '确认执行操作',
  '确定要发起这个REST请求吗？',
  function() {
    this.http.post('/api/your-target-endpoint', yourPayload)
      .subscribe(...);
  }.bind(this) // 绑定this到当前服务实例
);

进阶：用Promise+async/await优化代码（推荐长期使用） #

如果你的AlertService可以改成返回Promise的形式（点击「确定」resolve，点击「取消」reject），那代码会更清爽，完全避免回调嵌套：

首先修改AlertService的confirm方法（示例）：

// alert.service.ts里的confirm方法
confirm(title: string, message: string): Promise<void> {
  return new Promise((resolve, reject) => {
    // 这里是你原来的确认框逻辑，比如调用UI组件
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      data: { title, message }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        resolve(); // 用户点了确定，resolve
      } else {
        reject(new Error('用户取消操作')); // 用户点了取消，reject
      }
    });
  });
}

然后在InspectionService里用async/await调用：

// inspection.service.ts里的方法
async performActionWithConfirm() {
  try {
    // 等待用户确认
    await this.alertService.confirm('确认执行操作', '确定要发起这个REST请求吗？');
    // 用户确认后，调用REST服务
    const response = await this.http.post('/api/your-target-endpoint', yourPayload)
      .toPromise(); // 把Observable转成Promise
    // 处理成功响应
    console.log('请求成功:', response);
  } catch (error) {
    // 处理用户取消或请求错误
    console.log('操作取消或出错:', error);
  }
}

这种写法逻辑清晰，和同步代码差不多，维护起来超方便。

内容的提问来源于stack exchange，提问作者SK.