如何解决 Angular 循环依赖

Question

我在 Angular 工作，并且有一个调用服务的组件。该服务用于调用 API，但问题是我必须根据用户正在查看的选项卡使用某些参数 post 到 API。因此，我可以获取组件中的活动选项卡，但随后需要将其传递给服务，以便服务可以 post 使用该参数。

服务 -> 组件

服务 <- 组件

很明显的循环依赖，但如何解决？

这就是我在 service.ts

中获取需要传递给我的 observable 的选项卡的方式

details.component.ts

tabChanged = (tabChangeEvent: MatTabChangeEvent): number => {
    console.log("tabChangeEvent => ", tabChangeEvent);
    console.log("index => ", tabChangeEvent.index);
    return tabChangeEvent.index;
  };

这是当前的文件结构

https://imgur.com/NwhkDeO

我通过首先将组件导入服务来从服务内部的组件获取活动选项卡

import { DetailsComponent } from "./details/details.component";

然后在我的构造函数中声明它

constructor(private http: HttpClient, private details: DetailsComponent) {}

最后尝试将活动选项卡信息拉入我的可观察对象以替换我拥有的 "static" 参数。

public getPunchDataToday(): Observable<any> {
    let today: string | number | Date = new Date();
    today = this.formatDate(today);
    let tab = this.details.tabChanged;
    return this.getPunchData("", "static", today, today);
  }

在尝试保存和获取之前，我已经了解了这么多

WARNING in Circular dependency detected:
src\app\portal\dashboard\details\details.component.ts -> src\app\portal\dashboard\timerack.service.ts -> src\app\portal\dashboard\details\details.component.ts

我可能应该展示的最后一件事是，我从一个数组中获取所有 mat-tab 选项卡，该数组具有定义名称和 ID 的对象。我在界面上显示了名称，但需要 API 调用的 ID。

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
  <mat-tab
    *ngFor="let tab of tabs; let i = index"
    label="{{ this.tabs[i].name }}"
  >

Answer 1

很简单.... 我通过了这样的论点

public getPunchDataToday(location: string): Observable<any> {
    let today: string | number | Date = new Date();
    today = this.formatDate(today);
    return this.getPunchData("", location, today, today);
  }

这样，一切都发生在组件内部。

如何解决 Angular 循环依赖

How to work around Angular Circular Dependency

circular-dependency

angular-material

angular