Angular 8升级至9：基类加@Component后子类不同选择器如何配置？

升级Angular 8到9时，Ivy编译器要求所有被组件继承的基类必须带有装饰器，升级脚本会自动给基类加上@Component，但官方示例里基类指定了selector，可如果子类需要各自用不同的选择器，该怎么处理呢？

先回顾下你的代码场景：

升级前代码 #

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，但不知道该怎么配置它的selector，才能让两个子类继续使用各自的选择器。

我之前处理过同样的问题，有两种简洁可行的方案：

方案一：给基类配置一个占位符选择器 #

基类的@Component只是为了满足Ivy的元数据要求，并不会被实际实例化，所以可以给它配置一个永远不会被使用的占位符选择器，比如带私有前缀的名称：

@Component({
  selector: 'app-base-menu', // 占位符，不会在模板中使用
  template: '' // 基类不需要模板，子类会自行提供
})
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配置完全独立于基类，基类的selector只是凑数用的，不会影响子类的选择器和渲染逻辑。

方案二：用@Directive代替@Component装饰基类 #

如果你的基类只是用来封装子类的通用逻辑，本身不需要作为组件渲染，更推荐用@Directive装饰基类——因为@Directive在Angular 9+中可以不需要指定selector（当仅作为基类使用时），这样代码更干净：

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

这个方案完全规避了selector的问题，同时满足Ivy对基类必须有装饰器的要求，是官方更推荐的实践方式。

内容的提问来源于stack exchange，提问作者LuJaks