【问题标题】:Angular Service: providedIn issue with circular dependencyAngular Service:providedIn 循环依赖问题
【发布时间】:2021-05-08 02:53:38
【问题描述】:

首先,我是 Angular 世界的新手,有一些 AngularJS 的经验(在这里没用哈哈哈)

我关注this link 是为了获得特定模块的服务/状态。

但是一旦我在模块中使用它,我就会得到一个循环依赖Warning: Circular dependency detected

如果出现此错误,我怎么可能使用这样的 providedIn 属性来设置模块?

home-store.service.ts

import { Injectable } from '@angular/core';
import { HomeModule } from './home.module';

export interface IHomeState {
  user?: any;
}

@Injectable({ providedIn: HomeModule }) // I'd like to restrict this service to HomeModule
export class HomeStoreService {}

home-module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, RouterModule.forChild([])],
})
export class HomeModule {}

home-component.ts

import { Component } from '@angular/core';
import { HomeStoreService } from './home-store.service';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent {
  constructor(private homeStore: HomeStoreService) {}
}

提前致谢。

【问题讨论】:

    标签: angular typescript service module


    【解决方案1】:

    我建议不要使用providedIn,因为你不需要它。 因此,您可以像这样更改代码并获得相同的结果。

    home-store.service.ts

    export interface IHomeState {
      user?: any;
    }
    
    export class HomeStoreService {}
    

    home-module.ts

    import { CommonModule } from '@angular/common';
    import { NgModule } from '@angular/core';
    import { RouterModule } from '@angular/router';
    import { HomeComponent } from './home.component';
    import { HomeStoreService } from 'path/to/service';
    
    @NgModule({
      declarations: [HomeComponent],
      imports: [CommonModule, RouterModule.forChild([])],
      providers: [HomeStoreService]
    })
    export class HomeModule {}
    

    home-component.ts 无改动

    【讨论】:

    • 效果很好。我假设使用providers 数组我仍然可以延迟加载,对吗?但是,我可以自己检查。谢谢!
    • 是延迟加载,但没有摇树
    • 一旦我导航到另一个路由/模块,HomeStoreService 不会被破坏。那是因为我们在装饰器上使用了providers 数组而不是providedIn 吗?
    • 答案是否定的。添加 ProvidedIn 或仅在模块上添加提供程序具有相同的结果。您可以尝试,在服务上添加实现 OnDestroy 并将控制台日志放入其中。当我尝试时,它运行良好,当我导航到另一个模块时,服务被破坏
    • 我还是需要用空的@Injectable()来装饰服务吧?否则我会得到:Class is using Angular features but is not decorated. Please add an explicit Angular decorator.。我这样做了,我的 ngOnDestroy() 方法从未被调用,我使用的是 Angular 11.0.0。我还在使用loadChildren 延迟加载我的模块
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-25
    • 1970-01-01
    相关资源
    最近更新 更多