Angular/Typescript - 收到循环依赖的警告答案

【问题标题】：Angular/Typescript - Getting Warning for Circular dependencyAngular/Typescript - 收到循环依赖的警告
【发布时间】：2020-07-07 17:07:06
【问题描述】：

我在当前项目中面临循环依赖警告。我需要一些帮助来解决这个警告问题。我搜索了 StackOverflow 或技术博客来解决这个问题。不幸的是，我没有找到合适的解决方案。如果有人帮助我，那就更好了。

下面是项目文件夹结构。

src
 app
  services
   slice
    slice.service.ts
  slices
   home
    help
     help.component.html
     help.component.ts
    home.module.ts
   index.ts

检测到循环依赖中的警告： src\app\slices\home\help\help.component.ts -> src\app\services\slice\slice.service.ts -> src\app\slices\index.ts -> src\app\slices\home\help\help.component.ts

help.component.ts

import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
import { select, Store } from '@ngrx/store'
import { Observable } from 'rxjs'

// components
import { BaseSliceComponent } from '@app/components/slice/base-slice.class'

// services
import { SliceService } from '@app/services/slice/slice.service'

// models
import { SliceOptions } from '@app/models/slice/slice.model'

// selectors
import config from './store/victims.selector'

@Component({
  selector: 'app-help',
  templateUrl: './help.component.html',
  styleUrls: ['./help.component.scss'],
})
export class HelpComponent extends BaseSliceComponent implements OnInit {
  config: Observable<SliceOptions> = this.store.pipe(select(config))

  constructor(private store: Store<any>, private sliceService: SliceService) {
    super()
  }

  ngOnInit(): void {}

}

slice.service.ts

import {
  ComponentRef,
  Injectable,
  ViewContainerRef
} from '@angular/core'
import { Router } from '@angular/router'
import { Store } from '@ngrx/store'

import SliceMap from '@app/slices'

import { SliceNameKeys } from '@app/models/slice/slice.model'

@Injectable({
  providedIn: 'root'
})
export class SliceService {
  private sliceStack: ComponentRef<any>[] = []

  private sliceHost!: ViewContainerRef

  constructor(
    private store: Store<any>,
    private router: Router,
  ) {  }

  create(
    name: SliceNameKeys,
    id?: string | undefined,
    shouldClear?: boolean,
    index?: number
  ) {
    id = id ?? name // if no id specified keep name as id

    const slice = SliceMap[name]
  }

}

slices/index.ts

import { SliceNames } from '@app/models/slice/slice.model'

// components
import { AboutUsComponent } from './home/aboutus/aboutus.component'
import { HelpComponent } from './home/help/help.component'

const SliceMap: SliceNames = {
  help: HelpComponent,
  aboutUs: AboutUsComponent
}

export default SliceMap

base-slice.class.ts

export abstract class BaseSliceComponent {
  id = ''
}

【问题讨论】：

你能分享一下 BasicSliceComponent.ts 吗？
你能把@app/slices和@app/models/slice/slice.model的内容贴出来
@wlf - @app/slices 只不过是 app/slices/ 下的 'index.ts'。希望现在清楚
@AbhinavKumar - 已添加
你在 sliceService 中导入 sliceMap，而不是 sliceMap 导入 HelpComponent，HelpComponent 导入 sliceService。我想这就是问题所在。 @krrr25

标签： javascript angular typescript circular-dependency

【解决方案1】：

在您的项目中，没有合适的解决方案或工具可以自动找到循环依赖。

您只需要仔细检查每个不循环依赖的服务和注入。

喜欢

A->B 和 B->A

您还需要签入每个服务依赖项。

【讨论】：