typescript - Angular 14 frittstående komponent for å bruke singleton-tjenesteinstans

Å bruke APP_INITIALIZER-tokenet i min app.module.ts for å kjøre initialiseringslogikk i en av tjenestene mine fungerer helt fint, helt til jeg prøver å bruke den samme tjenesten i en av mine frittstående komponenter, hvor jeg får en ny instans av den samme tjenesten, men uten initialiseringen.

app.modul.ts

@NgModule({
imports: [],
declarations: [],
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: (fooService: FooService) => () => fooService.init(),
        deps: [FooService],
        multi: true,
    },
],
bootstrap: [AppComponent],
})
export class AppModule {}

komponent.ts

@Component({
    standalone: true,
    imports: [],
    providers: [FooService],
})
export class BarComponent implements OnInit, OnDestroy {

    constructor(
        private fooService: FooService
    ) {}
}

Når component.ts blir opprettet, får jeg en helt ny instans av fooService og jeg har ingen måte å kjøre async init()-metoden på før det skjer.

Svar #1

Når du markerer en tjeneste som en leverandør, vil en forekomst av den bli opprettet. I ditt tilfelle vil den enkleste tilnærmingen være å merke tjenesten som programomfattende ved å bruke {provideIn: 'root'}. For eksempel;

Fra dokumentene Singleton-tjenester

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

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

Men ovenfor er for NgModule-baserte komponenter og apper ELLER for app-omfattende tjenester (loaders, auth, osv.). Dette er app-omfattende, noe som kanskje ikke er veldig nyttig hvis du har frittstående underfunksjoner. Hvis du ønsket å bruke en singleton på tvers av en frittstående komponent og komponentene brukt innenfor den; prøv nedenfor

Fra dokumenter På komponentnivå

@Component({
  standalone: true,
  selector: 'hero-list',
  template: '...',
  providers: [HeroService]
})
class HeroListComponent {}

I dette tilfellet, sørg for å ikke inkludere tjenesten i leverandørliste for barnekomponenter, og inkluder den kun i konstruktøren. På den måten vil den samme instansen av tjenesten bli gjenbrukt.

Relaterte artikler