现在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来装饰。

现在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来装饰。

只需使用继承，在子类中扩展父类，并在super()中使用父类形参声明构造函数和此形参。

父类:

@Component({
  selector: 'teams-players-box',
  templateUrl: '/maxweb/app/app/teams-players-box.component.html'
})
export class TeamsPlayersBoxComponent {
  public _userProfile: UserProfile;
  public _user_img: any;
  public _box_class: string = "about-team teams-blockbox";
  public fullname: string;
  public _index: any;
  public _isView: string;
  indexnumber: number;

  constructor(
    public _userProfilesSvc: UserProfiles,
    public _router: Router,
  ){}

子类:

@Component({  
  selector: '[teams-players-eligibility]',  
  templateUrl: '/maxweb/app/app/teams-players-eligibility.component.html'  
})  
export class TeamsPlayersEligibilityComponent extends TeamsPlayersBoxComponent {  
  constructor (public _userProfilesSvc: UserProfiles,
    public _router: Router) {  
      super(_userProfilesSvc,_router);  
    }  
  }

让我们来了解一下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。

如果你通读CDK库和材质库，你会发现它们都在使用继承，但对组件本身使用的不多，在我看来，内容投影才是王道。请看这个链接https://blog.angular-university.io/angular-ng-content/，上面写着“这个设计的关键问题”

我知道这不能回答你的问题，但我真的认为应该避免继承/扩展组件。我的理由是:

如果由两个或多个组件扩展的抽象类包含共享逻辑: 使用一个服务，甚至创建一个新的typescript类，可以在两个组件之间共享。

如果抽象类…包含共享变量或onClicketc函数， 然后，两个扩展组件视图的html之间将出现重复。这是一个不好的做法&共享的html需要被分解成组件。这些组件(部件)可以在两个组件之间共享。

我是否遗漏了为组件创建抽象类的其他原因?

我最近看到的一个例子是组件扩展AutoUnsubscribe:

import { Subscription } from 'rxjs';
import { OnDestroy } from '@angular/core';
export abstract class AutoUnsubscribeComponent implements OnDestroy {
  protected infiniteSubscriptions: Array<Subscription>;

  constructor() {
    this.infiniteSubscriptions = [];
  }

  ngOnDestroy() {
    this.infiniteSubscriptions.forEach((subscription) => {
      subscription.unsubscribe();
    });
  }
}

这是因为在整个大型代码库中，infinitessubscriptions .push()只使用了10次。此外，导入和扩展AutoUnsubscribe实际上需要比在组件本身的ngOnDestroy()方法中添加mySubscription.unsubscribe()更多的代码，这需要额外的逻辑。

据我所知，在Angular 2中还没有实现组件继承，我不确定他们是否计划这样做，不过既然Angular 2使用了typescript(如果你决定这么做的话)，你就可以通过MyClass extends OtherClass{…}。对于组件继承，我建议通过访问https://github.com/angular/angular/issues并提交特性请求来参与Angular 2项目!