[angular] Angular 2에서 싱글 톤 서비스를 어떻게 만듭니 까?

업데이트 (Angular 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]
})

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

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

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

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

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

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);
    }

    ...
}

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");
        });
    }
    ...
}