각도 구성 요소 및 선택기

요소

Angular는 컴포넌트에 관한 모든 것입니다. 구성 요소는 항상 템플릿과 연결된 지시문의 하위 집합입니다. 나는 그것들을 템플릿에 정의된 보기라고 부릅니다. 구성 요소는 다음으로 구성됩니다.

템플릿 - 애플리케이션의 뷰 레이아웃을 렌더링하는 데 사용됩니다. 여기에는 응용 프로그램에서 렌더링해야 하는 HTML이 포함됩니다. 이 부분에는 뷰의 전원을 켜는 데 사용하는 바인딩 및 지시문이 포함되어 있습니다.

클래스 - 이것은 TypeScript로 생성되며 뷰에서 사용하기 위한 속성 및 데이터 요소를 포함합니다. 이것은 속성과 메서드를 포함하는 C와 같은 언어로 정의된 클래스와 같습니다.

Metadata - 여기에는 Angular 클래스에 대해 정의된 추가 데이터가 있습니다. 데코레이터로 정의됩니다.

Angular CLI를 사용하여 새 구성 요소를 만들 때 새로 만든 구성 요소는 다음과 같습니다.

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

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'example-app';
}

선택자

선택자를 보기 전에 먼저 Decorator가 무엇인지 알아야 합니다. 데코레이터는 Angular에서 클래스를 구성 요소로 식별하는 데 사용되며 기존 구성 요소에서 사용할 수 있는 속성의 종류를 정의하는 정보 메타데이터를 제공합니다.

여기서 @Component 함수는 객체를 전달하는 데코레이터입니다.

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

Selector는 구성 요소 지시어 이름을 지정하며 구성 요소 구성과 함께 사용하는 개체의 속성 중 하나입니다. app.component.ts에는 브라우저에 렌더링된 후 HTML DOM 트리에서 앱 구성 요소를 식별하는 데 사용되는 고유 이름과 함께 선택기라는 속성이 하나 있습니다.

선택기를 사용하는 방법

@Component({
  selector: 'app-component',
  templateUrl:`
  <div><h1>{{pageTitle}}</h1>
      <div>My First Component</div>
  </div>
  `
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  pageTitle: string = 'Example App';
}

선택자는 HTML에서 지시문으로 사용할 때 구성 요소의 이름이고 템플릿은 표시하려는 HTML을 정의했습니다.

색인.html

<body>
 <app-component></app-component>
<body>

여기 index.html 파일에서 템플릿을 표시할 선택기를 추가하기만 하면 됩니다. 템플릿에서는 이것을 지시문이라고 합니다. 지시문은 기본적으로 사용자 정의 요소입니다. 통합 터미널에서 ng serve --open을 실행하여 앱이 로드되는 즉시 코드가 컴파일됩니다. 컴파일이 완료되면 템플릿에 정의된 HTML이 선택한 요소 태그 사이에 삽입되어 페이지에 나타납니다.

Reference

이 문제에 관하여(각도 구성 요소 및 선택기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chichicodes/angular-components-and-selectors-nc3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다