앵귤러 싱글톤 객체 사용법

 

 

앵귤러에서 객체를 싱글톤 형식으로 공유하여 사용하는 방법이 있다. 불필요한 객체 사용을 하지 않고, 자주사용하는 객체를 빼서 관리하는 방법이다.
방법은 어렵지 않다.
공통으로 사용 할 서비스를 만들어서 해당 서비스를 컴포넌트 끼리 공유하면 된다.
1. 서비스를 만든다.
2. 메인 모듈 컴포넌트에 서비스를 등록하고 공급한다.
3. 해당 서비스를 받아서 사용한다.

 

메인 컴포넌트 예제

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ShareItemService} from './share-item.service';  //내가만든 서비스

@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  FormsModule
],
providers: [ShareItemService], //해당서비스를 공급한다.
bootstrap: [AppComponent]
})
export class AppModule { }

 

서비스 예제

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

@Injectable({
  providedIn: 'root'
})
export class ShareItemService {
  array = [1,2,3,4,5]; //공유할 객체

  constructor() { 

  }
  //나중에 공유 할 메소드나 Output할 객체를 써도 된다.
}

 

사용하는 컴포넌트 예제

import { Component,Host,Optional } from '@angular/core';
import {ShareItemService} from './share-item.service';
//사용할 서비스를 임포트 한다.
@Component({
  selector: 'rts-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'singleton-share';
  private service : ShareItemService;
  private radioArray;
  //생성자를 통해 의존성을 주입 받는다. 이때 Host와 Optional 데코레이터를 사용하면 객체가 없는 경우 에러를 방지한다.
  constructor(@Host() @Optional() serv : ShareItemService){
       this.service = serv;
       this.radioArray = this.service.array

    };
  }

}