在Angular中，可以使用HttpClient来发送API请求，并使用canActivate守卫来拦截路由导航。在canActivate方法中，可以使用Observable来处理API响应。

下面是一个示例：

// 导入必要的模块和类
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class MyAuthGuard implements CanActivate {

  constructor(private http: HttpClient, private router: Router) {}

  canActivate(): Observable {
    // 发送API请求
    return this.http.get('https://api.example.com/auth').pipe(
      map((response: any) => {
        // 处理API响应
        if (response.isAuthenticated) {
          return true; // 允许导航
        } else {
          this.router.navigate(['/login']); // 重定向到登录页面
          return false; // 不允许导航
        }
      })
    );
  }
}

在上面的示例中，canActivate方法返回一个Observable。在方法中，我们使用HttpClient发送了一个GET请求到https://api.example.com/auth，并通过map操作符对API响应进行处理。

如果API响应中的isAuthenticated属性为true，则返回true，允许导航到所请求的路由。如果isAuthenticated为false，则重定向到登录页面并返回false，不允许导航。

最后，将MyAuthGuard添加到路由配置中，以便在需要进行权限验证的路由上使用：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyAuthGuard } from './my-auth.guard';

const routes: Routes = [
  { path: 'protected', canActivate: [MyAuthGuard], component: ProtectedComponent },
  // 其他路由配置...
];

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

请注意，上述示例仅为演示目的，并假设https://api.example.com/auth返回的API响应具有isAuthenticated属性。在实际应用中，您需要根据您的API和身份验证机制进行适当的更改。