如何在angular中只为礼品卡模块添加提供者、服务和拦截器？

Question

我只为礼品卡模块实现缓存，并且我创建了 http-cache.service 和缓存拦截器。当我在 app.module.ts 中添加服务时，它可以工作，但我只需要为礼品卡单独实现这个。当我单独做对于礼品卡，它不起作用。这是我的代码

礼品卡路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GiftcardComponent } from './list/giftcard.component';
import { GiftcardtransactionComponent } from './giftcardtransaction/giftcardtransaction.component';
 const routes: Routes = [
    {
      path: '',
      component: GiftcardComponent
    },
    {
      path: 'sales',
      component: GiftcardtransactionComponent,
      data: { breadcrumb: "Sales" }
    }   
  ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
  
})
export class GiftCardRoutingModule { }

礼品卡.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { GiftcardComponent } from './list/giftcard.component';
import { GiftcardtransactionComponent } from './giftcardtransaction/giftcardtransaction.component';
import { GiftCardRoutingModule } from './giftcard-routing.module';
import { CacheInterceptor } from '../helper/interceptors/cache.interceptor';
import { HttpCacheService } from '../helper/services/cache/http-cache.service';
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
@NgModule({
    imports: [
        CommonModule,
        GiftCardRoutingModule,
        RouterModule        
    ],
    declarations: [
        GiftcardComponent,
        GiftcardtransactionComponent        
  ],
  providers: [
    HttpCacheService,{ provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }
  ],
})
export class GiftCardModule { }

Answer 1

引用模块中的服务时会发生哪个错误？

你的模块只导入一次吗？

我还发现您的路由声明存在问题。 您已经在您的 giftcard -routing.module.ts中导入了 RouterModule并将其导出。

您不需要在您的giftcard.module.ts中单独导入路由器模块这也可能导致一些问题

Answer 2

您可以在应用程序的任何位置注入 UserService。

服务本身是 CLI 生成的 class 并用 @Injectable() 修饰。 默认情况下，这个装饰器有一个 providedIn 属性，它为服务创建一个提供者。 在这种情况下，providedIn: 'root' 指定 Angular 应该在根注入器中提供服务。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class UserService {
}

也可以指定应该在特定的@NgModule 中提供服务。 例如，如果您不希望 UserService 对应用程序可用，除非它们导入您创建的 UserModule，您可以指定应在模块中提供该服务：

import { Injectable } from '@angular/core';
import { UserModule } from './user.module';

@Injectable({
  providedIn: UserModule,
})
export class UserService {
}