javascript - 角度/打字稿中的循环依赖
问题描述
我在角度项目中面临循环依赖。我遇到了许多解决方案,包括按照此处的说明从“单个文件”导出所有依赖类https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and- for-all-in-javascript-typescript-a04c987cf0de 它没有用。所以我转向不同的解决方案,比如按照以下链接中的说明使用依赖注入:
但是尽管使用了依赖注入,仍然有例外。下面是代码:
模块A.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";
}
}
模块B.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";
}
}
应用组件.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 { }
有人可以看看代码和身份有什么问题吗谢谢
解决方案
问题是您的模块名称导出与模块本身在同一个文件中。您应该创建一个名为的单独文件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));
}
}
但是,您想要做什么?感觉就像你在做一些你绝对不应该做的事情。(或在任何其他编程环境中)。我很确定一旦使用--prod
标志编译了应用程序,您的模块名称就会有所不同,并且无论您尝试做什么,都将不再起作用。
在您的情况下,您需要第三项服务。一个同时注入服务A和服务B的服务。这个服务C应该处理你想做的事情
推荐阅读
- javascript - 我怎样才能延迟动作,机器人会忽略第二个命令,直到我执行第一个命令?
- c - 嗨,我正在为此硬件编码,使用信号(sigaction,sigprocmask)
- python - 使用 ffmpeg 将 youtube 音频转换为 .mp3:错误:音频转换失败:编码器:Lavc58.91.100 libmp3lame
- arrays - 需要帮助在 perl 中填充结构数组
- amazon-web-services - Terraform 总是说 s3 存储桶策略的模板文件更改
- flutter - 你能改变颤动的文字主题吗?
- javascript - 单击特定按钮时,如何使 div 缓慢滑出(使用 CSS 的转换属性)?
- visualforce - Visualforce 页面上的美国国家选项列表
- python-3.x - KivyMD onkeypress 事件 - Python
- php - 为什么重定向不起作用?你会如何解决它?