Angular跨组件调用函数时this关键字失效问题求助

问题现象 #

在ComponeComponent的deleteClient方法内，所有console.log语句均正常执行，但this.toastr.error()和this.ngOnInit()完全无响应。点击侧边栏组件（sidebar component）的其他按钮时，toast提示能正常显示。该deleteClient方法由另一个不同模块的组件调用，AppModule已正确导入并配置ToastrModule。

相关代码 #

组件代码 #

export class ComponeComponent implements OnInit {

  constructor(private cService: CService, private toastr: ToastrService) { }

  // 存储特定客户端对象
  clientObj: any;

  // 存储所有客户端列表
  clients: any[] = [];

  /**
   * 获取所有客户端数据
   */
  ngOnInit() {
    this.cService.getClient().subscribe(
      (page: any) => {
        this.clients = page.payload;
      }
    );
    this.toastr.warning("Sorry, problem in loading records in client");
  }

  ....

  /**
   * 删除指定客户端
   */
  deleteClient() {
    this.cService.deleteClient(this.clientObj.id).subscribe(
      response => {
        console.log('Client record Deleted!', response);
        console.log(this.clientObj.id);
        this.toastr.error("Client record Deleted");
        console.log(this.clientObj.id);
        this.ngOnInit();
      }
    );
  }
}

AppModule配置 #

....
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    ....
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    ToastrModule.forRoot({
      closeButton: true,
      enableHtml: true,
      timeOut: 5000,
      positionClass: 'toast-top-right',
    }),
    BrowserAnimationsModule,
    HttpClientModule
  ],
})

已尝试方案 #

• 调整toast提示的调用位置
• 更换toast的显示位置
• 将this赋值给常量变量保存上下文
  以上方法均未解决问题。

解决方案 #

1. 绑定方法的上下文 #

由于deleteClient是跨组件调用，大概率是调用时this指向发生了偏移，未指向当前组件实例。可以在组件构造函数中绑定this：

constructor(private cService: CService, private toastr: ToastrService) { 
  // 绑定deleteClient方法的上下文到当前组件实例
  this.deleteClient = this.deleteClient.bind(this);
}

或者在调用该方法的外部组件中，用箭头函数包裹调用逻辑，确保上下文正确：

// 外部组件中调用示例
() => componeComponentInstance.deleteClient()

2. 避免手动调用生命周期方法 #

Angular的ngOnInit是生命周期方法，不建议手动调用。建议将数据加载逻辑抽成独立方法：

// 抽离加载客户端列表的逻辑
loadClients() {
  this.cService.getClient().subscribe(
    (page: any) => {
      this.clients = page.payload;
    }
  );
}

ngOnInit() {
  this.loadClients();
  this.toastr.warning("Sorry, problem in loading records in client");
}

然后在deleteClient的订阅回调中调用该方法：

deleteClient() {
  this.cService.deleteClient(this.clientObj.id).subscribe(
    response => {
      console.log('Client record Deleted!', response);
      console.log(this.clientObj.id);
      this.toastr.error("Client record Deleted");
      console.log(this.clientObj.id);
      this.loadClients(); // 调用抽离后的方法
    }
  );
}

3. 验证Toastr服务的有效性 #

在deleteClient方法开头添加日志，确认this.toastr是否存在：

deleteClient() {
  console.log('当前组件实例的toastr:', this.toastr);
  this.cService.deleteClient(this.clientObj.id).subscribe(
    // ... 现有逻辑
  );
}

如果输出为undefined，则说明上下文确实丢失，通过绑定this即可解决。

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