Angular에서 구성 요소 생성(CLI 사용/수동)

Angular CLI를 사용하여 구성 요소 만들기




ng generate component <component-name>


기본적으로 이 명령은 다음을 생성합니다.
  • 구성 요소 이름을 딴 폴더
  • 구성 요소 파일, <component-name>.component.ts
  • 템플릿 파일, <component-name>.component.html
  • CSS 파일, <component-name>.component.css
  • 테스트 사양 파일, <component-name>.component.spec.ts

  • 여기서 <component-name>는 구성요소의 이름입니다.

    수동으로 구성요소 생성



    새 구성 요소를 수동으로 생성하려면 다음을 수행하십시오.
  • Angular 프로젝트 디렉토리로 이동합니다.
  • 새 파일을 만듭니다. <component-name>.component.ts .

  • 파일 맨 위에 다음 가져오기 문을 추가합니다.

    content_copyimport {Component } from '@angular/core';
    

  • import 문 다음에 @[Component](https://angular.io/api/core/Component) 데코레이터를 추가합니다.

    content_copy@Component({
    })
    


  • 구성 요소에 대한 CSS 선택기를 선택합니다.

    content_copy@Component({
      selector: 'app-component-overview',
    })
    

    선택기 선택에 대한 자세한 내용은 Specifying a component's selector을 참조하세요.

  • 구성 요소가 정보를 표시하는 데 사용하는 HTML 템플릿을 정의합니다. 대부분의 경우 이 템플릿은 별도의 HTML 파일입니다.

    content_copy@Component({
      selector: 'app-component-overview',
      templateUrl: './component-overview.component.html',
    })
    

    구성요소 템플릿 정의에 대한 자세한 내용은 Defining a component's template을 참조하세요.

  • 구성 요소 템플릿의 스타일을 선택합니다. 대부분의 경우 별도의 파일에서 구성 요소 템플릿의 스타일을 정의합니다.

    content_copy@Component({
      selector: 'app-component-overview',
      templateUrl: './component-overview.component.html',
      styleUrls: ['./component-overview.component.css']
    })
    


  • 구성요소의 코드를 포함하는 class 문을 추가합니다.

    content_copyexport class ComponentOverviewComponent {
    
    }
    


  • 참조 : Angular Component Overview

    좋은 웹페이지 즐겨찾기