如何仅在角度中为礼品卡模块添加提供者、服务和拦截器？答案

【问题标题】：How to add providers, service and interceptor only for gift card module in angular?如何仅在角度中为礼品卡模块添加提供者、服务和拦截器？
【发布时间】：2022-01-14 00:23:35
【问题描述】：

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

giftcard-routing.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 { }

giftcard.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 { }

【问题讨论】：

标签： angular module angular-http-interceptors http-caching angular-providers

【解决方案1】：

在你的模块中引用服务时会出现什么错误？

你的模块只导入一次吗？

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

您不需要在 giftcard.module.ts 中单独导入 Router Module 这也可能会导致一些问题

【讨论】：

我没有收到任何错误。当我从 app.module.ts 中删除缓存时缓存不起作用

【解决方案2】：

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

服务本身是 CLI 生成的一个类，并用 @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 {
}

【讨论】：