#03 Tutorial (Multiple Components)

 Naming Convention
 Component 파일은 '.component'로 파일이름이 끝나야한다. 그리고 소문자와 dash('-')로 구성된 이름을 사용한다.
ex) 

hero-detail.component.ts

 

- component 파일의 구성은 다음과 같다.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})
export class HeroDetailComponent {
}

 

1. Component와 Input을 import한다.
2. @Component 키워드를 사용해서 Component의 element를 나타내는 selector 이름을 명시한다.
3. template을 정의한다.
4. 다른 Component들이 용할 수 있게 class를 export 한다.

- import
hero.ts 파일에서 Hero를 import한다.

import { Hero } from './hero';

 

- input 선언

  @Input()
  hero: Hero;

 

- target은 []로 감싸고 = 왼편에 둔다. hero가 input으로 선언되어 있을 때만 가능하다. 그렇지 않으면, 에러를 발생시킨다.
- selectedHero가 설정되기 전까지 그려지지 않는다.

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

 

- AppModule의 declarations에 모든 컴포넌트들을 배열로 선언한다.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

 

- 우리가 선언한 컴포넌트를 selector에 사용한 이름으로 사용하면 된다.

<my-hero-detail></my-hero-detail>