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

使用您发布的链接中指定的 @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 {}

Answer 2

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 {}