在Angular中，我们可以使用守卫（guards）来控制路由访问和导航。当我们需要在导航发生时自动取消正在进行的API调用时，可以使用守卫来实现。

下面是一个示例代码，演示了如何使用守卫来取消正在进行的API调用：

1. 创建一个名为ApiCancelGuard的守卫类，在该类中实现CanDeactivate接口：

import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class ApiCancelGuard implements CanDeactivate {
  canDeactivate(): Observable | boolean {
    // 在这里执行取消API调用的逻辑
    // 返回Observable或boolean，表示是否允许导航
    // 如果返回false，则导航将被取消
    return true;
  }
}

2. 在需要进行API调用的组件中，注册该守卫类：

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    
  `
})
export class MyComponent {
  // 注册守卫类
  canDeactivate = () => {
    // 执行API调用
    // 返回Observable，表示是否允许导航
    // 如果需要取消API调用，可以使用RxJS的takeUntil操作符
    // takeUntil操作符接收一个Observable作为参数，当该Observable发出值时，会自动取消订阅
    return this.apiService.apiCall().pipe(
      takeUntil(this.unsubscribe$),
      mapTo(true)
    );
  }

  private unsubscribe$ = new Subject();

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

3. 在路由配置中，将守卫类添加到相应的路由上：

import { Routes } from '@angular/router';
import { MyComponent } from './my-component';
import { ApiCancelGuard } from './api-cancel-guard';

const routes: Routes = [
  {
    path: 'my-component',
    component: MyComponent,
    canDeactivate: [ApiCancelGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [ApiCancelGuard]
})
export class AppRoutingModule { }

以上代码示例中，ApiCancelGuard守卫类实现了CanDeactivate接口，并在canDeactivate方法中实现了取消API调用的逻辑。在需要进行API调用的组件中，我们将守卫类注册到canDeactivate属性上，并在该属性中执行API调用，使用takeUntil操作符实现API调用的取消。最后，在路由配置中将守卫类添加到相应的路由上。

当导航发生时，Angular会自动调用守卫类的canDeactivate方法，并根据返回的值决定是否允许导航。如果返回false，则导航将被取消，API调用也会被自动取消。