hostDirectives 속성
컴포넌트 호스트에 지시문을 연결합니다.
hostDirectives 속성은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
지시문 조합 API
지시문 조합 API를 사용하면 컴포넌트나 지시문이 hostDirectives 속성을 통해 자체 호스트 요소에 다른 지시문을 선언적으로 적용할 수 있습니다. 상속 없이 기능을 재사용할 수 있습니다.
해결하는 문제
이전에는 지시문 기능을 재사용하려면 모든 템플릿에 지시문을 반복해서 작성하거나 상속을 사용해야 했습니다. hostDirectives는 기능을 호스트에 직접 조합합니다.
기본 구문
컴포넌트 메타데이터의 hostDirectives 배열에 지시문을 나열합니다.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}어떤 일이 일어나나요
Angular는 모든 app-menu 호스트 요소에 CdkTrapFocus를 자동으로 적용합니다. 사용자는 지시문을 직접 추가하지 않아도 해당 기능을 사용할 수 있습니다.
요구 사항
호스트 지시문은 standalone이어야 합니다. 지시문 선택자가 아니라 지시문 클래스를 직접 참조합니다.
여러 호스트 지시문
여러 기능을 모두 나열하여 조합할 수 있습니다.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]지시문에 적용하기
지시문에도 호스트 지시문을 지정할 수 있으므로, 여러 층으로 구성되고 조합 가능한 기능을 만들 수 있습니다.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}수명 주기 순서
호스트 지시문은 호스트 자체의 생성자 로직보다 먼저 인스턴스화됩니다. 따라서 호스트가 초기화될 때 호스트 지시문의 설정을 사용할 수 있습니다.
의존성 주입
요소 인젝터를 통해 호스트 지시문을 호스트에 주입하거나 그 반대로 주입할 수 있으므로, 조합된 기능 간의 협력이 가능합니다.
private trap = inject(CdkTrapFocus);템플릿 변경 없음
가장 큰 장점은 app-menu 사용자가 CdkTrapFocus에 대해 알 필요가 없다는 것입니다. 기능이 컴포넌트 정의 안에 캡슐화됩니다.
사용할 때
포커스 가두기, 물결 효과, 분석과 같은 공통 기능을 컴포넌트나 지시문에 깔끔하고 재사용 가능하게 묶으려면 hostDirectives를 사용하세요.
빠른 확인
hostDirectives에 대한 이해도를 확인해 보세요.
복습
hostDirectives 속성이 독립형 지시문을 컴포넌트나 지시문의 호스트 요소에 자동으로 적용하여, 템플릿이나 상속 없이 조합을 통해 기능을 재사용할 수 있게 한다는 것을 배웠습니다.
자주 묻는 질문
“hostDirectives 속성” 강의는 무료인가요?
네 — “hostDirectives 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“hostDirectives 속성”에서 뭘 배우나요?
컴포넌트 호스트에 지시문을 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“hostDirectives 속성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- hostDirectives 속성
- 입력과 출력 노출
- 재사용 가능한 동작 만들기
- 조합과 상속 비교