[Angular] 05. Components: Selectors

 Angular 공식 문서를 실습하고 정리하는 글입니다.

 

컴포넌트의 CSS 선택자

모든 Angular 선택자는 CSS 선택자를 정의하며, 이 선택자는 컴포넌트가 어떻게 사용될 지 결정한다.

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

• 컴포넌트의 선택자는 해당 컴포넌트를 HTML에서 어떻게 사용할 지 정의한다.
• 다른 컴포넌트의 템플릿에서 선택자와 일치하는 HTML요소를 생성하여 컴포넌트를 사용한다.

 

@Component({
  template: `
    <profile-photo />
    <button>Upload a new profile photo</button>`,
  ...,
})
export class UserProfile { }

• Angular는 선택자를 컴파일 타임에 정적으로 매칭한다. 런타임에 DOM을 변경해도 이미 렌더링된 컴포넌트에는 영향을 미치지 않는다.
• 하나의 요소는 하나의 컴포넌트 선택자와 매칭되며, 컴포넌트 선택자는 대소문자를 구분한다.

 

선택자 유형

선택자 유형	매칭 방식	예시
Type 선택자	HTML 태그 이름 또는 노드 이름 기반의 요소 매칭	profile-photo
Attribute 선택자	HTML 속성의 존재 여부 정확한 값 기반 매칭	[dropzone], [type=”reset”]
Class 선택자	CSS 클래스의 존재 여부에 기반한 요소 매칭	.menu-item

 

:not 의사 클래스

:not 의사 클래스를 다른 선택자에 추가하여 컴포넌트 선택자가 매칭할 요소를 좁힐 수 있다.

@Component({
  // [dopzone] 속성 선택자를 정의, textarea요소를 제외
  selector: '[dropzone]:not(textarea)',
  ...
})
export class DropZone { }

 

선택자 결합

type=”reset”을 지정한 <button> 요소를 매칭할 수 있다.

@Component({
  selector: 'button[type="reset"]',
  ...
})
export class ResetButton { }

 

쉼표로 구분하여 여러 선택자를 정의할 수 있다. 하나라도 매칭되는 요소에 대해 컴포넌트를 생성한다.

@Component({
  selector: 'drop-zone, [dropzone]',
  ...
})
export class DropZone { }