angular/typescript 中的循环依赖

Question

我在 angular 项目中面临循环依赖。我遇到过很多解决方案，包括按照此处 https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de 的指示从 "single file" 导出所有相关的类它没有用。所以我转向不同的解决方案，比如按照以下链接中的说明使用依赖注入：

但是尽管使用了依赖注入，还是有例外。下面是代码：

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

有人可以看看代码和身份有什么问题吗谢谢

Answer 1

问题是您将模块名称导出到与模块本身相同的文件中。您应该创建一个名为 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 应该处理你想做的事情

Answer 2

不推荐使用同类型循环依赖。相反，您应该使用一些 service/interface 来相互协作组件。

angular/typescript 中的循环依赖

Circular dependency in angular/typescript

javascript

angular

typescript

dependency-injection

circular-dependency