팁: 이 가이드 문서는 핵심 가이드 이후 내용을 다룹니다. 아직 Angular에 익숙하지 않다면 해당 문서를 먼저 읽어보세요.
Angular 컴포넌트는 TypeScript 클래스이기 때문에 표준 JavaScript 상속 문법을 사용할 수 있습니다.
이렇게 상속하면 됩니다:
export class ListboxBase { value: string;}@Component({ ... })export class CustomListbox extends ListboxBase { // CustomListbox는 ListboxBase를 상속하기 때문에 `value` 프로퍼티가 존재합니다.}
컴포넌트, 디렉티브 확장하기
컴포넌트가 다른 컴포넌트나 디렉티브를 상속하면, 부모 클래스에 있는 메타데이터와 프로퍼티를 모두 상속받습니다. 여기에는 호스트 바인딩, 입출력 프로퍼티, 라이프싸이클 메서드가 모두 포함됩니다.
@Component({ selector: 'base-listbox', template: ` ... `, host: { '(keydown)': 'handleKey($event)', },})export class ListboxBase { value = input.required<string>(); handleKey(event: KeyboardEvent) { /* ... */ }}@Component({ selector: 'custom-listbox', template: ` ... `, host: { '(click)': 'focusActiveOption()', },})export class CustomListbox extends ListboxBase { disabled = input(false); focusActiveOption() { /* ... */ }}
위 예제 코드에서 CustomListbox 는 ListboxBase의 정보를 모두 상속받으며, 셀렉터와 템플릿은 새로운 값을 오버라이딩합니다.
그래서 CustomListbox에는 입력 프로퍼티가 2개(value, disabled) 존재하고 이벤트 리스너도 2개(keydown, click) 존재합니다.
결국 자식 클래스는 부모 클래스의 모든 입출력 프로퍼티, 호스트 바인딩을 포함합니다.
의존성 객체 전달하기
부모 클래스가 생성자로 의존성 객체를 주입받으면, 자식 클래스에서는 super를 사용해서 해당 객체를 의존성으로 전달해야 합니다.
@Component({ ... })export class ListboxBase { constructor(private element: ElementRef) { }}@Component({ ... })export class CustomListbox extends ListboxBase { constructor(element: ElementRef) { super(element); }}
라이프싸이클 메서드 오버라이딩
부모 클래스에서 ngOnInit과 같은 라이프싸이클 메서드를 구현했다면, 자식 클래스에서 다시 ngOnInit 함수를 구현하면서 부모 클래스의 메서드를 오바리이딩 할 수 있습니다.
이 때 부모 클래스의 메서드를 실행하려면, super 키워드와 함께 실행하면 됩니다:
@Component({ ... })export class ListboxBase { protected isInitialized = false; ngOnInit() { this.isInitialized = true; }}@Component({ ... })export class CustomListbox extends ListboxBase { override ngOnInit() { super.ngOnInit(); /* ... */ }}