Angular 9 обновление компонента наследования декоратора

Question

В процессе обновления от Angular 8 до Angular 9 скрипт обновления добавляет декораторы компонентов к базовым классам. Это задокументировано в https://angular.io/guide/migration-undecorated-classes

В задокументированном примере селектор установлен в декораторе базового класса.

Но как поступить, если вам нужно два разных селектора в дочерних компонентах компонента базового класса?

До:

class BaseMenu {}

@Component({
  selector: 'a-menu',
  template: '<div></div>'
})
export class AMenu extends BaseMenu {}

@Component({
  selector: 'b-menu',
  template: '<div></div>'
})
export class BMenu extends BaseMenu {}

После :

@Component(???)
class BaseMenu {}

@Component({
  selector: 'a-menu',
  template: '<div></div>'
})
export class AMenu extends BaseMenu {}

@Component({
  selector: 'b-menu',
  template: '<div></div>'
})
export class BMenu extends BaseMenu {}

Компонентный декоратор ожидает «селектор».

Answer 1

Angular перегружен декораторами и метаданными (@Component, @Directive, @NgModule, ...). Эти метаданные и декораторы не наследуются дочерними компонентами. Таким образом, вы можете просто использовать селектор-заполнитель, чтобы заполнить его. См. https://blog.bitsrc.io/component-inheritance-in-angular-acd1215d5dd8

@Component({
  selector: 'x-menu',
  template: '<div></div>'
})
class BaseMenu {}

@Component({
  selector: 'a-menu',
  template: '<div></div>'
})
export class AMenu extends BaseMenu {}

@Component({
  selector: 'b-menu',
  template: '<div></div>'
})
export class BMenu extends BaseMenu {}

Answer 2

Используйте декоратор @Directive, как указано в размещенной вами ссылке. @Directive не требует селектора.

@Directive()
class BaseMenu {}

@Component({
  selector: 'a-menu',
  template: '<div></div>'
})
export class AMenu extends BaseMenu {}

@Component({
  selector: 'b-menu',
  template: '<div></div>'
})
export class BMenu extends BaseMenu {}