Inheritance

Angular bileşenleri TypeScript sınıflarıdır ve standart JavaScript inheritance semantiğine katılırlar.

Bir bileşen herhangi bir temel sınıfı genişletebilir:

export class ListboxBase {
  value: string;
}
@Component({ ... })
export class CustomListbox extends ListboxBase {
  // CustomListbox inherits the `value` property.
}

Diğer bileşenleri ve yönergeleri genişletme #

Bir bileşen başka bir bileşeni veya yönergeyi genişlettiğinde, temel sınıfın dekoratöründe ve temel sınıfın dekore edilmiş üyelerinde tanımlanan tüm meta verileri devralır. Buna seçici, şablon, stiller, ana bilgisayar bağları, girdiler, çıktılar, yaşam döngüsü yöntemleri ve diğer ayarlar dahildir.

@Component({
  selector: 'base-listbox',
  template: `
    ...
  `,
  host: {
    '(keydown)': 'handleKey($event)',
  },
})
export class ListboxBase {
  @Input() value: string;
  handleKey(event: KeyboardEvent) {
    /* ... */
  }
}
@Component({
  selector: 'custom-listbox',
  template: `
    ...
  `,
  host: {
    '(click)': 'focusActiveOption()',
  },
})
export class CustomListbox extends ListboxBase {
  @Input() disabled = false;
  focusActiveOption() {
    /* ... */
  }
}

Yukarıdaki örnekte CustomListbox, ListboxBase ile ilişkili tüm bilgileri devralır, seçiciyi ve şablonu kendi değerleriyle geçersiz kılar. CustomListbox‘ın iki girdisi (value ve disabled) ve iki olay dinleyicisi (keydown ve click) vardır.

Alt sınıflar, atalarının tüm girdileri, çıktıları ve ana bilgisayar bağları ile kendilerininkinin birleşimiyle sonuçlanır.

Enjekte edilen bağımlılıkları iletme #

Bir temel sınıf bağımlılık enjeksiyonuna dayanıyorsa, alt sınıf bu bağımlılıkları açıkça super‘e aktarmalıdır.

@Component({ ... })
export class ListboxBase {
  constructor(private element: ElementRef) { }
}
@Component({ ... })
export class CustomListbox extends ListboxBase {
  constructor(element: ElementRef) {
    super(element);
  }
}

Yaşam döngüsü yöntemlerini geçersiz kılma #

Bir temel sınıf ngOnInit gibi bir yaşam döngüsü yöntemi tanımlarsa, ngOnInit‘i de uygulayan bir alt sınıf temel sınıfın uygulamasını geçersiz kılar. Temel sınıfın yaşam döngüsü yöntemini korumak istiyorsanız, yöntemi super ile açıkça çağırın:

@Component({ ... })
export class ListboxBase {
  protected isInitialized = false;
  ngOnInit() {
    this.isInitialized = true;
  }
}
@Component({ ... })
export class CustomListbox extends ListboxBase {
  override ngOnInit() {
    super.ngOnInit();
    /* ... */
  }
}