구성요소

구성 요소 만들기

터미널

$ cd src/app
$ ng generate component heroes

이 명령은 heroes 디렉터리를 구성 요소 (요소)로 만들고 일부는

heroes.component.ts

heroes.component.html

heroes.component.css

heroes.component.spec.ts

가 자동으로 작성되었습니다.
여기에 등장한 spec.ts 파일은 테스트용 파일입니다.

동작 확인

app.component.html

<h1>{{title}}</h1>
<app-heroes></app-heroes>

이렇게 작성하면 heroes 구성 요소를 결합할 수 있습니다.

이런 것이 나오네요.

또한 이전과 같이 ts 파일의 값을 HTML에 표시하고 싶습니다.
먼저 형식을 정의하는 파일(Hero 클래스)을 src/app로 만듭니다.

터미널

$ cd src/app
$ touch hero.ts

hero.ts

export class Hero{
    id: number;
    name: string;
}

이 파일을 다른 파일에서 가져오면 이 형식을 사용할 수 있습니다.

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero';//ここでインポート

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

  hero: Hero = {//ここを追加
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

여기서 hero가 객체가 되었으므로 HTML 파일을 변경해야 합니다.

hero.component.html

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

첫 번째 줄 | uppercase은 대문자로 만드는 파이프입니다.

이렇게 세부 정보가 표시됩니다.

속성 편집

그런 다음 영웅 세부 정보에서 name 속성을 변경할 수 있습니다.
요컨대 영웅의 이름을 바꿉니다.

먼저 이를 위해 FormsModule를 가져와야 합니다.
이와 같이 새로운 라이브러리나 모듈을 임포트할 때는 app/app.module.ts에 기술하지 않으면 사용할 수 없습니다.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';//ここを追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

모듈을 가져올 수 있으면 html을 변경합니다.

heroes.component.html

<h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div>
    <label>name:
      <input [(ngModel)]="hero.name" placeholder="name"/>
    </label>
  </div>

이 [(ngModel)]를 양방향 데이터 바인딩이라고합니다. 이것을 hero.name로 지정하여 name 속성을 변경할 수 있습니다.



이 완성 된 양식의 내용을 변경하여 영웅의 이름을 바꿀 수 있습니다.