Angular 2 2.3版本刚刚发布，它包含了原生组件继承。看起来你可以继承和重写任何你想要的东西，除了模板和样式。参考:

Angular 2.3中的新特性 Angular 2中的组件继承 演示组件继承的Plunkr

组件可以像typescript类继承一样扩展，只是您必须用一个新名称覆盖选择器。所有来自父组件的Input()和Output()属性正常工作

更新

@Component是一个装饰器，

装饰符是在类声明期间应用的，而不是在对象上。

基本上，装饰器向类对象添加一些不能通过继承访问的元数据。

如果你想实现装饰器继承，我建议写一个自定义装饰器。类似下面的例子。

export function CustomComponent(annotation: any) {
    return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;

    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);
    var parentParamTypes = Reflect.getMetadata('design:paramtypes', parentTarget);
    var parentPropMetadata = Reflect.getMetadata('propMetadata', parentTarget);
    var parentParameters = Reflect.getMetadata('parameters', parentTarget);

    var parentAnnotation = parentAnnotations[0];

    Object.keys(parentAnnotation).forEach(key => {
    if (isPresent(parentAnnotation[key])) {
        if (!isPresent(annotation[key])) {
        annotation[key] = parentAnnotation[key];
        }
    }
    });
    // Same for the other metadata
    var metadata = new ComponentMetadata(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
    };
};

参考: https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7

让我们来了解一下Angular组件继承系统的一些关键限制和特性。

组件只继承类逻辑:

@Component装饰器中的所有元数据都不会被继承。 组件@Input属性和@Output属性被继承。 组件生命周期不继承。

记住这些特性是非常重要的，所以让我们单独研究每一个特性。

组件只继承类逻辑

当你继承一个组件时，里面的所有逻辑都是平等继承的。值得注意的是，只有public成员被继承，而private成员只能在实现它们的类中访问。

@Component装饰器中的所有元数据都不会被继承

没有元数据被继承的事实乍一看似乎是违反直觉的，但如果你仔细想想，它实际上是完全有道理的。如果你从一个组件继承，比如(componentA)，你不会想要从componentA继承的选择器替换被继承的类ComponentB的选择器。对于template/templateUrl以及style/styleUrls也是如此。

组件@Input和@Output属性被继承

这是我非常喜欢Angular中组件继承的另一个特性。简单地说，只要有自定义的@Input和@Output属性，这些属性就会被继承。

组件生命周期不继承

这一部分不是很明显，特别是对那些没有广泛使用过面向对象原则的人来说。例如，假设你有ComponentA，它实现了Angular的许多生命周期钩子中的一个，比如OnInit。如果你创建了ComponentB并继承了ComponentA，那么ComponentA的OnInit生命周期将不会触发，直到你显式地调用它，即使你确实为ComponentB拥有这个OnInit生命周期。

调用超级/基本组件方法

为了从ComponentA中获得ngOnInit()方法，我们需要使用super关键字，然后调用我们需要的方法，在本例中是ngOnInit。super关键字指的是要继承的组件的实例，在本例中是ComponentA。

现在TypeScript 2.2通过类表达式支持mixin，我们就有了更好的方法在组件上表达mixin。注意，你也可以从angular 2.3开始使用组件继承(讨论)，或者在其他回答中讨论的自定义装饰器。然而，我认为mixin有一些属性，使它们更适合跨组件重用行为:

Mixins的组合更加灵活，也就是说，你可以在现有组件上混合和匹配Mixins，或者组合Mixins来形成新的组件 Mixin组合仍然很容易理解，这要归功于它对类继承层次结构的明显线性化 您可以更容易地避免装饰器和注释的问题，这些问题会困扰组件继承(讨论)

我强烈建议你阅读上面的TypeScript 2.2公告，以了解Mixins是如何工作的。angular GitHub问题中的链接讨论提供了更多细节。

你需要这些类型:

export type Constructor<T> = new (...args: any[]) => T;

export class MixinRoot {
}

然后你可以声明一个类似于Destroyable Mixin的Mixin，它可以帮助组件跟踪需要在ngOnDestroy中释放的订阅:

export function Destroyable<T extends Constructor<{}>>(Base: T) {
  return class Mixin extends Base implements OnDestroy {
    private readonly subscriptions: Subscription[] = [];

    protected registerSubscription(sub: Subscription) {
      this.subscriptions.push(sub);
    }

    public ngOnDestroy() {
      this.subscriptions.forEach(x => x.unsubscribe());
      this.subscriptions.length = 0; // release memory
    }
  };
}

要将可摧毁的组件混合到组件中，你可以这样声明你的组件:

export class DashboardComponent extends Destroyable(MixinRoot) 
    implements OnInit, OnDestroy { ... }

注意，只有当您想要扩展Mixin组合时，才需要使用Mixin root。你可以很容易地扩展多个mixin，例如A扩展B(C(D))。这是我上面谈到的mixin的明显线性化，例如，你有效地组成了一个继承层次结构A -> B -> C -> D。

在其他情况下，例如当你想在一个现有的类上组合Mixin时，你可以像这样应用Mixin:

const MyClassWithMixin = MyMixin(MyClass);

然而，我发现第一种方法最适合组件和指令，因为这些也需要用@Component或@Directive来装饰。

可选择的解决方案:

蒂埃里·坦普利埃的回答是解决这个问题的另一种方法。

在与Thierry Templier讨论了一些问题后，我给出了下面的工作示例，它满足了我的期望，可以作为这个问题中提到的继承限制的替代方案:

1 -创建自定义装饰:

export function CustomComponent(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

    var parentAnnotation = parentAnnotations[0];
    Object.keys(parentAnnotation).forEach(key => {
      if (isPresent(parentAnnotation[key])) {
        // verify is annotation typeof function
        if(typeof annotation[key] === 'function'){
          annotation[key] = annotation[key].call(this, parentAnnotation[key]);
        }else if(
        // force override in annotation base
        !isPresent(annotation[key])
        ){
          annotation[key] = parentAnnotation[key];
        }
      }
    });

    var metadata = new Component(annotation);

    Reflect.defineMetadata('annotations', [ metadata ], target);
  }
}

2 -使用@Component装饰器的基础组件:

@Component({
  // create seletor base for test override property
  selector: 'master',
  template: `
    <div>Test</div>
  `
})
export class AbstractComponent {

}

3 -使用@CustomComponent装饰器的子组件

@CustomComponent({
  // override property annotation
  //selector: 'sub',
  selector: (parentSelector) => { return parentSelector + 'sub'}
})
export class SubComponent extends AbstractComponent {
  constructor() {
  }
}

Plunkr的完整示例。

Angular 2 2.3版本刚刚发布，它包含了原生组件继承。看起来你可以继承和重写任何你想要的东西，除了模板和样式。参考:

Angular 2.3中的新特性 Angular 2中的组件继承 演示组件继承的Plunkr