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

Posted 2023-02-19

【中文标题】如何仅在角度中为礼品卡模块添加提供者、服务和拦截器？

【英文标题】：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  

【参考方案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