Angular / Typescript-收到关于循环依赖的警告

发布时间:2020-07-07 17:07

我在当前项目中面临循环依赖警告。我需要一些帮助来解决此警告问题。我搜索了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]
  }

}

切片/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 = ''
}
回答1

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

您只需要仔细检查与循环无关的每种服务和注射剂即可。

喜欢

A-> B和B-> A

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