时间戳

首页 > 解决方案 > Angular 9 更新组件继承装饰器

angular - Angular 9 更新组件继承装饰器

问题描述

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

组件装饰器需要一个“选择器”。

标签： angular

解决方案

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

推荐阅读