Question

我不知道我要做什么。我已经使用forRoot方法在AppModule上导入了SharedModule。然后，在需要的常规组件上导入了SharedModule，如下所示：

App.module.ts ：

> import { BrowserModule } from '@angular/platform-browser'; import {
> NgModule } from '@angular/core'; import { SharedModule } from
> './shared/shared.module'; import { HttpClientModule } from
> '@angular/common/http'; import { AppComponent } from
> './app.component'; import { ClinicaComponent } from
> './clinica/clinica.component'; import { ClinicaModule } from
> './clinica/clinica.module'; import { AppRoutingModule } from
> './/app-routing.module'; import { ProfesionalComponent } from
> './profesional/profesional.component'; import { ProfesionalModule }
> from './profesional/profesional.module';
> 
> @NgModule({
>     imports: [
>         BrowserModule,
>         ClinicaModule,
>         ProfesionalModule,
>         SharedModule.forRoot(),
>         AppRoutingModule,
>         HttpClientModule,
>     ],
>     declarations: [
>       ClinicaComponent,
>       AppComponent,
>       ProfesionalComponent
> 
>     ],
>     providers: [],
>     bootstrap: [AppComponent] }) export class AppModule { }

Shared.module.ts ：

export const GlobalProviders = [ //para los global providers
  {
        provide: AuthServiceConfig,
        useFactory: getAuthServiceConfigs
      },
   AuthenticationService, UserService, AlertService, ProfesionalService, ServiciosService, ClinicService
];
@NgModule({
    imports: [
        CommonModule,
        //SharedRoutingModule,
        FormsModule,
        ReactiveFormsModule,
        SocialLoginModule
    ],
    declarations: [LoginComponent,
       HeaderComponent,
       NotFoundComponent,
       MyfooterComponent,
       RequiredLabelDirective],
    exports: [
        RouterModule,
        HeaderComponent,
        MyfooterComponent,
        RequiredLabelDirective,
        FormsModule,
        ReactiveFormsModule
    ]
})
export class SharedModule {

   static forRoot(): ModuleWithProviders {
        return {
            ngModule: SharedModule,
            providers: [GlobalProviders]
        };
    }

因此，我想使用专业组件MisDatosComponent的同级组件中的GlobalProviders。这是我的 profesional.component.ts ：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GestionProfesionalesComponent } from './gestion-profesionales/gestion-profesionales.component';
import { MisDatosComponent } from './profile/profile.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  declarations: [ MisDatosComponent, GestionProfesionalesComponent]
})
export class ProfesionalModule { }

这是您理解我的项目结构：

structure

所以我以为，当我在ProfesionalModule中导入sharedModule时，并且在ProfileProfileComponent中也导入了sharedModule时，我可以使用提供sharedModule的服务。但是它无法识别它，因此我必须在ProfileComponent中一个接一个地导入服务。可以帮助我的人吗？

Answer 1

要从字面上回答您的问题，是的。如果将服务添加到ngModule的provider数组中，然后又有第二个ngModule导入第一个，则第二个的组件将可以访问第一个的Provider。

文档中的这篇文章有一个很好的解释，包括一些方法，可以在不需要此提供程序时限制它们的共享：https://angular.io/guide/providers#providedin-and-ngmodules

我可以在组件上使用由共享模块提供的服务吗？

1 个答案: