Як створити одиночну службу в Angular 2?

Я читав, що впорскування під час завантаження повинна мати всіх дітей, що мають один і той же екземпляр, але основні компоненти та заголовки (основне додаток включає заголовок компонента та маршрутизатор) отримують окремий екземпляр моїх служб.

У мене є FacebookService, який я використовую для здійснення дзвінків у facebook javascript api та UserService, який використовує FacebookService. Ось мій завантажувач:

bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);

З мого журналу схоже на те, що виклик завантажувальної програми закінчується, тоді я бачу, що FacebookService, а потім UserService створюється до запуску коду в кожному з конструкторів, MainAppComponent, HeaderComponent і DefaultComponent:

Джейсон абсолютно прав! Це викликано тим, як працює ін'єкція залежності. Він заснований на ієрархічних форсунках.

У програмі Angular2 є кілька інжекторів:

• Кореневий, який ви налаштовуєте під час завантаження програми
• Інжектор на компонент. Якщо ви використовуєте компонент всередині іншого. Компонентний інжектор є дочірнім батьківським компонентом. Компонент програми (той, який ви вказали під час завантаження програми), має головний інжектор як батьківський).

Коли Angular2 намагається ввести щось у конструктор компонентів:

• Він заглядає в інжектор, пов'язаний з компонентом. Якщо є одна відповідна, вона використовуватиме її для отримання відповідного екземпляра. Цей екземпляр ліниво створений і є сингтом для цього інжектора.
• Якщо на цьому рівні немає постачальника, він перегляне батьківський інжектор (тощо).

Отже, якщо ви хочете мати синглтон для всієї програми, вам потрібно визначити постачальника або на рівні кореневого інжектора, або інжектора компонента програми.

Але Angular2 дивиться на дерево інжектора знизу. Це означає, що постачальник на найнижчому рівні буде використовуватися, а сфера пов'язаного екземпляра буде цього рівня.

Дивіться це питання для більш детальної інформації:

• Який найкращий спосіб ввести одну службу в іншу в куті 2 (бета-версія)?

Оновлення (кутова 6 +)

Рекомендований спосіб створення одиночної послуги змінився. Тепер рекомендується в @Injectableдекораторі вказати на сервісі, що він повинен надаватися у "корені". Це має для мене багато сенсу, і більше не потрібно перераховувати всі надані послуги у ваших модулях. Ви просто імпортуєте сервіси, коли вони вам потрібні, і вони зареєструються в потрібному місці. Ви також можете вказати модуль, щоб він був наданий лише у випадку імпорту модуля.

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

• https://angular.io/guide/singleton-services
• https://angular.io/guide/providers

Оновлення (кутова 2)

Що стосується NgModule, я думаю, що це зробити зараз, я думаю, це створити "CoreModule" з класом обслуговування в ньому та перелічити службу в постачальників модулів. Потім ви імпортуєте основний модуль у свій основний модуль додатка, який надасть один екземпляр будь-яким дітям, які запитують цей клас у своїх конструкторах:

CoreModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiService } from './api.service';

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [ // components that we want to make available
    ],
    declarations: [ // components for use in THIS module
    ],
    providers: [ // singleton services
        ApiService,
    ]
})
export class CoreModule { }

AppModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
    declarations: [ AppComponent ],
    imports: [
        CommonModule,
        CoreModule // will provide ApiService
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

Оригінальний відповідь

Якщо ви перераховуєте провайдера в bootstrap(), вам не потрібно перераховувати їх у вашому декораторі компонентів:

import { ApiService } from '../core/api-service';

@Component({
    selector: 'main-app',
    templateUrl: '/views/main-app.html',
    // DO NOT LIST PROVIDERS HERE IF THEY ARE IN bootstrap()!
    // (unless you want a new instance)
    //providers: [ApiService]
})
export class MainAppComponent {
    constructor(private api: ApiService) {}
}

Фактично перерахування вашого класу на «провайдерів» створює його новий екземпляр, якщо якийсь батьківський компонент вже перелічив його, то дітям цього не потрібно, і якщо вони будуть, вони отримають новий екземпляр.

Я знаю, що кутові є ієрархічні форсунки, як сказав Тьєррі.

Але в мене є ще один варіант, якщо ви знайдете футляр, коли ви не хочете вводити його у батьків.

Ми можемо досягти цього, створивши екземпляр служби, і при наданні завжди повертаємо це.

import { provide, Injectable } from '@angular/core';
import { Http } from '@angular/core'; //Dummy example of dependencies

@Injectable()
export class YourService {
  private static instance: YourService = null;

  // Return the instance of the service
  public static getInstance(http: Http): YourService {
    if (YourService.instance === null) {
       YourService.instance = new YourService(http);
    }
    return YourService.instance;
  }

  constructor(private http: Http) {}
}

export const YOUR_SERVICE_PROVIDER = [
  provide(YourService, {
    deps: [Http],
    useFactory: (http: Http): YourService => {
      return YourService.getInstance(http);
    }
  })
];

А потім на своєму компоненті ви використовуєте власний метод надання.

@Component({
  providers: [YOUR_SERVICE_PROVIDER]
})

І ви повинні мати одиночне обслуговування, не залежно від ієрархічних форсунок.

Я не кажу, що це кращий спосіб - це лише на випадок, коли у когось є проблеми, коли ієрархічні інжектори неможливі.

Синтаксис змінено. Перевірте це посилання

Залежності є одинаковими в межах інжектора. У наведеному нижче прикладі один екземпляр HeroService поділяється між HeroesComponent та його дітьми HeroListComponent.

Крок 1. Створіть одиночний клас за допомогою декоратора @Injectable

@Injectable()
export class HeroService {
  getHeroes() { return HEROES;  }
}

Крок 2. Ввести в конструктор

export class HeroListComponent { 
  constructor(heroService: HeroService) {
    this.heroes = heroService.getHeroes();
  }

Крок 3. Зареєструйте провайдера

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule,
    JsonpModule
  ],
  declarations: [
    AppComponent,
    HeroesComponent,
    routedComponents
  ],
  providers: [
    HeroService
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Додавання @Injectableдекоратора до Сервісу та реєстрація його як постачальника у Root Module зробить його однократним.

це, здається, добре працює для мене

@Injectable()
export class MyStaticService {
  static instance: MyStaticService;

  constructor() {
    return MyStaticService.instance = MyStaticService.instance || this;
  }
}

Ось робочий приклад з кутовою версією 2.3. Просто зателефонуйте конструктору служби таким чином, як цей конструктор (private _userService: UserService). І це створить синглтон для програми.

user.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Subject }    from 'rxjs/Subject';
import { User } from '../object/user';


@Injectable()
export class UserService {
    private userChangedSource;
    public observableEvents;
    loggedUser:User;

    constructor() {
       this.userChangedSource = new Subject<any>();
       this.observableEvents = this.userChangedSource.asObservable();
    }

    userLoggedIn(user:User) {
        this.loggedUser = user;
        this.userChangedSource.next(user);
    }

    ...
}

app.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { UserService } from '../service/user.service';
import { User } from '../object/user';

@Component({
    selector: 'myApp',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    loggedUser:User;

    constructor(private _userService:UserService) { 
        this._userService.observableEvents.subscribe(user => {
                this.loggedUser = user;
                console.log("event triggered");
        });
    }
    ...
}

A singleton service- це послуга, для якої у додатку існує лише один екземпляр.

Існують (2) способи надання послуги одиночки для вашої програми.

1. використовувати providedInмайно, або

2. надайте модуль безпосередньо в AppModuleдодатку

Використання передбаченихIn

Починаючи з Angular 6.0, кращим способом створення одиночної служби є встановлення providedInкорінця на @Injectable()декораторі служби. Це повідомляє Angular надавати послугу в корені програми.

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

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

Масив постачальників NgModule

У додатках, побудованих з кутовими версіями до 6.0, сервіси реєструються масивами постачальників NgModule таким чином:

@NgModule({
  ...
  providers: [UserService],
  ...
})

Якби це NgModuleкорінь AppModule, UserService був би однократним і доступним у всьому додатку. Хоча ви можете бачити, що це закодовано таким чином, використання providedInвластивості @Injectable()декоратора в самій сервісі є кращим, ніж у Angular 6.0, оскільки це робить ваші послуги непохитними.

Ви можете використовувати useValueв провайдерах

import { MyService } from './my.service';

@NgModule({
...
  providers: [ { provide: MyService, useValue: new MyService() } ],
...
})

З кутового @ 6, ви можете мати providedInв Injectable.

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

}

Перевірте документи тут

Є два способи зробити послугу одинарною в кутовій:

1. Заявіть, що послугу слід надавати у корені програми.
2. Включіть послугу в AppModule або в модуль, який імпортується тільки AppModule.

Починаючи з Angular 6.0, кращим способом створення одиночних служб є вказівка ​​на сервісі, яку вона повинна надавати в корені програми. Це робиться шляхом встановлення наданого корінця на корінь на @Injectable декоратор служби:

Просто оголосьте про свою послугу як постачальника лише в app.module.ts.

Це зробило роботу для мене.

providers: [Topic1Service,Topic2Service,...,TopicNService],

тоді або інстанціюйте його за допомогою приватного параметра конструктора:

constructor(private topicService: TopicService) { }

або оскільки якщо ваша послуга використовується з html, опція -prod вимагатиме:

Property 'topicService' is private and only accessible within class 'SomeComponent'.

додайте член для вашої послуги та заповніть його екземпляром, отриманим у конструкторі:

export class SomeComponent {
  topicService: TopicService;
  constructor(private topicService: TopicService) { 
    this.topicService= topicService;
  }
}

1. Якщо ви хочете зробити сервіс одиночним на рівні програми, слід визначити його у app.module.ts

   провайдери: [MyApplicationService] (ви можете визначити те саме в дочірньому модулі, щоб зробити його саме таким модулем)

   • Не додайте цю послугу в провайдера, який створює екземпляр для того компонента, який порушує концепцію singleton, просто вводьте через конструктор.

2. Якщо ви хочете визначити одиночну службу на рівні компонента, створіть сервіс, додайте цю службу в app.module.ts та додайте до масиву провайдерів всередині певного компонента, як показано нижче.

   @Component ({selector: 'app-root', templateUrl: './test.component.html', styleUrls: ['./test.component.scss'], постачальники: [TestMyService]})

3. Кутовий 6 забезпечує новий спосіб додавання сервісу на рівні додатків. Замість того, щоб додавати клас обслуговування в масив провайдерів [] в AppModule, ви можете встановити таку конфігурацію в @Injectable ():

   @Injectable ({providedIn: 'root'}) клас експорту MyService {...}

"Новий синтаксис", однак, пропонує одну перевагу: Служби можна ліниво завантажувати кутовими (за кадром), а зайвий код можна видалити автоматично. Це може призвести до кращої продуктивності та швидкості завантаження - хоча це дійсно лише для великих служб та додатків загалом.

На додаток до вищезазначених відмінних відповідей, може бути ще щось, чого не вистачає, якщо речі у вашому синглетоні все ще не ведуть себе як одинокі. Я зіткнувся з проблемою, коли викликав публічну функцію в одиночному і виявив, що вона використовує неправильні змінні. Виявляється, проблема полягала в thisтому, що не гарантується прив’язаність до синглтона для будь-яких публічних функцій в синглетоні. Це можна виправити, дотримуючись тут порад , як-от так:

@Injectable({
  providedIn: 'root',
})
export class SubscriptableService {
  public serviceRequested: Subject<ServiceArgs>;
  public onServiceRequested$: Observable<ServiceArgs>;

  constructor() {
    this.serviceRequested = new Subject<ServiceArgs>();
    this.onServiceRequested$ = this.serviceRequested.asObservable();

    // save context so the singleton pattern is respected
    this.requestService = this.requestService.bind(this);
  }

  public requestService(arg: ServiceArgs) {
    this.serviceRequested.next(arg);
  }
}

Крім того, ви можете просто оголосити членів класу як public staticзамість цього public, тоді контекст не має значення, але вам доведеться отримувати доступ до них, як SubscriptableService.onServiceRequested$замість використання ін'єкції залежності та доступу до них через this.subscriptableService.onServiceRequested$.

Послуги для батьків та дітей

У мене виникли проблеми з батьківською службою та її дитиною, використовуючи різні примірники. Щоб примусити використовувати один екземпляр, ви можете встановити псевдонім з посиланням на дитину у постачальників модулів додатків. Батько не зможе отримати доступ до властивостей дитини, але однаковий екземпляр буде використаний для обох служб. https://angular.io/guide/dependency-injection-providers#aliased-class-providers

app.module.ts

providers: [
  ChildService,
  // Alias ParentService w/ reference to ChildService
  { provide: ParentService, useExisting: ChildService}
]

Послуги, що використовуються компонентами, що не належать до ваших модулів додатків

Створюючи бібліотеку, що складається з компонента та служби, я зіткнувся з проблемою, де було б створено два екземпляри. Один за моїм кутовим проектом та один за компонентом всередині моєї бібліотеки. Виправлення:

my-external.component.ts

@Component({...})
export class MyOutsideComponent {
  @Input() serviceInstance: MyOutsideService;
  ...
}

my-inside.component.ts

  constructor(public myService: MyOutsideService) { }

my-inside.component.hmtl

<app-my-outside [serviceInstance]="myService"></app-my-outside>