Angular Service [2] // 커스텀서비스생성 @Injectable

1.Service를 만듭니다.  

ng generate service hero

2.서비스에

    - injector로 다른 서비스나 컴포넌트에 inject했을때 인식 할 수 있도록 설정해놓는다.

    - 필요한 서비스 함수 생성

----- hero.service.ts --------------

import { HEROES } from './mockHeroes'

//어디서나 해당 서비스를 필요로 하면 inject시킬수 있다.

@Injector{

  providedIn: 'root',

}

// Hero배열을 리턴해줌

getHeroes() : Hero[] {

   return HEROES;

}

 

2. hero.Component.ts 에서 

   히어로 리스트를 service의  getHeroes를 통해를 통해 받을것이다.

 

  - service inject 하기

  - oninit 으로 초기부터 데이터 받아오도록 설정하기

-------- hero.component.ts -------------

import { HeroService } from '../hero.service';


export class HeroesComponent implements OnInit {
...
  heroes: Hero[];
  getHeroes(): void {
    this.heroes = this.heroService.getHeroes();
  }
...
  ngOnInit(): void {
    this.getHeroes();
  }
}