angular - 如何在 Angular 组件上封装 API 调用？

Question

我目前正在工作中学习 Angular，而不是来自网络开发背景。

我正在尝试封装我的一个组件 API 调用，但我什至不知道如何开始。

我有一个数据网格(建立在 mat-table 之上)组件，可以提供分页、排序和页面导航(下一页、上一页)等选项。

目前，当我在一个项目中使用这个组件时，我必须创建一个服务来调用 api 并处理分页、排序以及在我的组件之外移动下一页/上一页。

我想要完成的是，假设另一个项目决定使用我的组件库，我希望在我的数据网格中处理这些 API 操作。

我目前正在关注 angular.io 上的服务教程，但它没有涵盖这些内容。

至此，我创建了一个 BaseAPIService，我将在与 API 接口(interface)的服务类中继承它。

export declare class BaseAPIService {
    private httpClient;
    constructor(httpClient: HttpClient);
    protected request<T>(method: string, url: string, options?: any): Subject<T>;
    protected get<T>(url: string, options?: any): Subject<T>;
    protected head<T>(url: string, options?: any): Subject<T>;
    ...
}

然后，在使用我的数据网格的项目中，我们可能有一个扩展 BaseApiService 的 customers.service。但是如何让它将 url 传递给 api，并从 customer.service 配置到组件？

这可能吗？

Answer 1

根据我对你的问题的理解，你正在尝试构建一个用于其他 Angular 项目的库，如果是这种情况，那么一种可能的方法是定义一个由库用户实现的接口(interface)并传递它使用@Input 到组件:

export interface DataGridRestClient() {
  listItems(): Observable<MyModel[]>;
}

@Component({selector: 'myDataGrid'})
export class DataGridComponent {
  @Input() service: DataGridRestClient;
}

然后您的库用户将实现 DataGridRestClient 的自定义实现并将其传递给您的组件:

<myDataGrid [service]='myCustomImplInstance'></myDataGrid>

如果 API 调用永远不会改变，但实际上改变的只是主机，您可以将调用封装在一个服务中，并在您的组件上请求一个 URI:

@Injectable()
export class DataGridService {
  hostUri: string;
}

@Component({selector: 'myDataGrid'})
export class DataGridComponent {
  @Input() hostUri: string;
}

您的图书馆用户会这样做:

<myDataGrid hostUri='https://mycustomhosturi'></myDataGrid>