Angular 2-구성 요소

컴포넌트는 Angular JS 애플리케이션을위한 논리적 코드입니다. 구성 요소는 다음으로 구성됩니다-

Template− 애플리케이션의 뷰를 렌더링하는 데 사용됩니다. 여기에는 애플리케이션에서 렌더링해야하는 HTML이 포함됩니다. 이 부분에는 바인딩 및 지시문도 포함됩니다.
Class− 이것은 C와 같은 언어로 정의 된 클래스와 같습니다. 여기에는 속성과 메서드가 포함됩니다. 이것은 뷰를 지원하는 데 사용되는 코드를 가지고 있습니다. TypeScript에 정의되어 있습니다.
Metadata− Angular 클래스에 대해 정의 된 추가 데이터가 있습니다. 데코레이터로 정의됩니다.

이제 app.component.ts 파일로 이동하여 첫 번째 Angular 구성 요소를 만듭니다.

다음 코드를 파일에 추가하고 각 측면을 자세히 살펴 보겠습니다.

수업

클래스 데코레이터. 클래스는 TypeScript에서 정의됩니다. 클래스는 일반적으로 TypeScript에서 다음 구문을 사용합니다.

통사론

class classname {
   Propertyname: PropertyType = Value
}

매개 변수

Classname − 이것은 클래스에 부여 할 이름입니다.
Propertyname − 이것은 부동산에 부여 할 이름입니다.
PropertyType − TypeScript는 강력한 유형이므로 속성에 유형을 제공해야합니다.
Value − 이것은 부동산에 부여되는 값입니다.

예

export class AppComponent {
   appTitle: string = 'Welcome';
}

예제에서 다음 사항에주의해야합니다.

AppComponent라는 클래스를 정의하고 있습니다.
export 키워드는 컴포넌트가 Angular JS 애플리케이션의 다른 모듈에서 사용될 수 있도록 사용됩니다.
appTitle은 속성의 이름입니다.
속성에는 문자열 유형이 제공됩니다.
속성에 'Welcome'값이 지정됩니다.

주형

이것은 응용 프로그램에서 렌더링해야하는 뷰입니다.

통사론

Template: '
   <HTML code>
   class properties
'

매개 변수

HTML Code − 이것은 응용 프로그램에서 렌더링해야하는 HTML 코드입니다.
Class properties − 템플릿에서 참조 할 수있는 클래스의 속성입니다.

예

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

예제에서 다음 사항에주의해야합니다.

애플리케이션에서 렌더링 될 HTML 코드를 정의하고 있습니다.
또한 클래스에서 appTitle 속성을 참조하고 있습니다.

메타 데이터

추가 정보로 Angular JS 클래스를 장식하는 데 사용됩니다.

클래스, 템플릿 및 메타 데이터를 사용하여 완성 된 코드를 살펴 보겠습니다.

예

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

@Component ({
   selector: 'my-app',
   template: ` <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div> `,
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

위의 예에서 다음 사항에 유의해야합니다.