我在当前项目中面临循环依赖警告。我需要一些帮助来解决此警告问题。我搜索了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 = ''
}
没有合适的解决方案或工具可以在您的项目中自动找到循环依赖项。
您只需要仔细检查与循环无关的每种服务和注射剂即可。
喜欢
A-> B和B-> A
您还需要签入每个服务依赖项。