Как инкапсулировать вызовы API в компоненте Angular?

Question

В настоящее время я изучаю английский на своей работе, а не из веб-разработки.

Я пытаюсь инкапсулировать вызовы API одного из компонентов, но не знаю, как начать.

У меня есть компонент таблицы данных (построенный поверх таблицы mat), который будет обеспечивать такие параметры, как разбиение на страницы, сортировка и навигация по страницам (следующая, предыдущая страница).

В настоящее время, когда я использую этот компонент в проекте, мне нужно создать сервис, который будет вызывать API и обрабатывать нумерацию страниц, сортировку и перемещение следующих / предыдущих страниц за пределы моего компонента.

То, что я хочу сделать, это, скажем, другой проект решит использовать мою библиотеку компонентов, я бы хотел, чтобы эти действия API рассматривались в самой моей сетке данных.

В настоящее время я слежу заУчебник по услугам на angular.io, но это не распространяется на это.

До этого момента я создал BaseAPIService, который я буду наследовать в классах сервисов, которые будут взаимодействовать с API.

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>;
    ...
}

Затем в проекте, который использует мою сетку данных, у нас может быть customers.service, который расширяет BaseApiService.Но как сделать так, чтобы он передавал URL в api, а config в компонент из customer.service?

Это вообще возможно?

Answer 1

Исходя из моего понимания вашего вопроса, вы пытаетесь создать библиотеку для использования в других проектах Angular. Если это так, то одним из возможных подходов будет определение интерфейса, который будет реализован пользователями библиотеки, и передача этогок компоненту, используя @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>