Как обойти Angular Круговая зависимость - PullRequest
Новая
       65

Как обойти Angular Круговая зависимость

0 голосов
/ 23 февраля 2020

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

service -> компонент

service <- component </p>

Довольно очевидная циклическая зависимость, но как ее исправить?

Вот как я хватаю вкладку, которую нужно передать моей наблюдаемой в service.ts

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) {}

и, наконец, пытаюсь вытянуть информацию активной вкладки в мою наблюдаемую, чтобы заменить тот параметр "stati c", который у меня есть. 

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

Последнее, что я, вероятно, должен показать, это то, что я получаю все свои вкладки мат-вкладки из массива, который имеет объекты, которые определяют имя и идентификатор Я представляю имя на интерфейсе, но мне нужен идентификатор для вызова API. 

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

1 Ответ

0 голосов
/ 24 февраля 2020

Достаточно легко .... Я передал аргумент как таковой 

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

Таким образом, все происходит внутри компонента.

...