궁금한 점 1

질문1

<input id="hero-name" [(ngModel)]="hero.name" placeholder="name">

[(ngModel)]이 양방향으로 데이터 binding하는거는 알겠는데 <input> element에 원래는 value="hero.name" 이렇게 해야지 되는거 아님? 어떻게 value를 안써도 값이 들어감?

답

ngModle이 form을 다루는데 input이 form의 구성요소여서 되는거임.

질문2

// src/app/heroes/heroes.component.ts
...
import { HeroService } from '../hero.service';

export class HeroesComponent implements OnInit {
  ...
  constructor(private heroService: HeroService) { }
  ...
}

// src/app/hero.service.ts
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable, of } from 'rxjs';
import { MessageService } from './message.service';

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

  getHeroes(): Observable<Hero[]> {
    const heroes = of(HEROES);
    return heroes;
  }

  constructor(private messageService: MessageService) { }
}

위 처럼 있을때 아래로 가져와서 injection이 되는거임??

constructor(private heroService: HeroService) { }

답

// src/app/hero.service.ts
...
@Injectable({
  providedIn: 'root'
})
>..

원래는 AppModule에 보면 providers: [...] 해서 넣어주는데 위는 root에 등록해서 최상위 모듈인 AppModule에 등록이 됨.
서비스는 정의된 모듈마다 인스턴스가 하나씩 생겨서 여러 모듈에 서비스를 등록하면 각 모듈별로 인스턴스가 생겨서 따로 동작함. 근데 root로 provide하면 한개만 생겨서 싱글톤처럼 쓸 수 있는거임.

// src/app/app.module.ts
@NgModule({
  ...
  providers: [],
  ...
})

이제 서비스를 사용할 HeroesComponent이 생성될때 dependency injection system이 heroService를 HeroService의 싱글톤 parameter로 설정해줘서 inject가 됨.

// src/app/heroes/heroes.component.ts
constructor(private heroService: HeroService) { }

질문3

// src/app/heroes/heroes.component.ts
import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  selectedHero?: Hero;

  heroes: Hero[] = [];

  constructor(private heroService: HeroService, private messageService: MessageService) { }

  ngOnInit(): void {
    this.getHeroes();
  }

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
    this.messageService.add(`HeroesComponent: Selected hero id=${hero.id}`);
  }

  getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }
}

위 코드에서 아래 부분이 undefined가 아니라 빌드 했을때 HeroService 인스턴스가 들어오는지??

// src/app/heroes/heroes.component.ts
constructor(private heroService: HeroService, ...){}

답

서비스는 런타임 초기에 모듈 불러올때 provider에 등록된거 보고 거기에 맞춰서 인스턴스화됨. 따라서 해당 모듈에대해서는 싱글톤처럼 동작해서 저렇게 constructor로 불러오는 순간에 이미 인스턴스가 돼있음.

질문3

ngOnInit()하면 컴포넌트가 시작할때 실행되는거임??

답

화면에 랜더되기 위해 불려오는 최초시점에 실행됨. 컴포넌트 클래스가 인스턴스화 될때 불러와지는거는 constructor가 먼저 나오고 그 다음에 lifecycle 실행하기에 constructor 다음에 ngOnInit()이 불러와짐.
lifecycle hook 찾아보기.