Круговая зависимость в угловых / машинопись - PullRequest
Новая
       49

Круговая зависимость в угловых / машинопись

0 голосов
/ 08 апреля 2020

Я столкнулся с круговой зависимостью в проекте angular. Я сталкивался со многими решениями, включая экспорт всех зависимых классов из «одного файла», как указано здесь https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de Это не сработало. Поэтому я перешел к другому решению, например, к использованию инъекций зависимостей, как указано в следующих ссылках:

Как решить круговую зависимость Сервисы, зависящие друг от друга

Но, несмотря на использование инъекций зависимостей, есть все еще исключения. ниже приведен код:

moduleA.ts 

import { MODULE_B_NAME } from "./moduleB";
import { Injectable, Injector } from "@angular/core";


export const MODULE_A_NAME = 'Module A';
@Injectable({
  providedIn: 'root'
})
export class ModuleA {

  private tempService: any;
  constructor(private injector: Injector) {
    setTimeout(() => this.tempService = injector.get(MODULE_B_NAME));

  }


  public  getName(): string {

    this.tempService.getName();
    return "we are forked";
  }

}

moduleB.ts 

import { MODULE_A_NAME } from "./moduleA";
import { Injectable, Injector } from "@angular/core";

export const MODULE_B_NAME = 'Module B';
@Injectable({
  providedIn: 'root'
})
export class ModuleB {

  private tempService: any;
  constructor(private injector: Injector) {

    setTimeout(() => this.tempService = injector.get(MODULE_A_NAME));


  }
  public getName(): string {

    //this.tempService = this.injector.get(MODULE_A_NAME);
    this.tempService.getName();
    return "we are forked";
  }

}

appComponent.ts 

import { Component } from '@angular/core';
import { ModuleA } from './moduleA';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test01';


  getSomething() {

    return ModuleA.name;
  }



}

appModules.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ModuleA } from './moduleA';
import { ModuleB } from './moduleB';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ModuleA, ModuleB],
  bootstrap: [AppComponent]
})
export class AppModule { }

Может кто-нибудь, пожалуйста, посмотрите на код и личность, что с ним не так, спасибо

enter image description here

Ответы [ 2 ]

1 голос
/ 08 апреля 2020

Проблема в том, что вы экспортируете имя вашего модуля в тот же файл, что и сам модуль. Вы должны создать отдельный файл с именем module-names.const.ts: 

export const MODULE_A_NAME = 'Module A';
export const MODULE_B_NAME = 'Module B';

Затем вы можете импортировать этот файл в оба ваших модуля без циклической зависимости: 

import { MODULE_A_NAME } from "./module-names.const";

import { Injectable, Injector } from "@angular/core";

@Injectable({
  providedIn: 'root'
})
export class ModuleB {
  constructor(private injector: Injector) {
    setTimeout(() => this.tempService = injector.get(MODULE_A_NAME));
  }
}

Однако что это такое? что вы пытаетесь сделать? Такое чувство, что вы делаете то, что вам определенно не следует делать в angular. (или в любой другой среде программирования в этом отношении). Я почти уверен, что имя вашего модуля будет другим после компиляции приложения с использованием флага --prod, и то, что вы пытаетесь сделать, больше не будет работать.

В вашем случае, вам нужен третий сервис. Тот, который внедряет как службу A, так и службу B. И эта служба C должна обрабатывать то, что вы хотите сделать

0 голосов
/ 08 апреля 2020

Не рекомендуется использовать однотипные циклические зависимости. Вместо этого вам следует использовать какой-либо сервис / интерфейс для взаимодействия компонентов друг с другом.

...