Gewusst wie: erweitern/vererben Komponenten?

Alternative Lösung:

Diese Antwort von Thierry Templier ist eine alternative Möglichkeit, um um das problem.

Nachdem einige Fragen mit Thierry Templier, kam ich zu dem folgenden Beispiel, dass meine Erwartungen erfüllt als alternative zur Vererbung erwähnte Einschränkung in dieser Frage:

1 - Erstellen Sie benutzerdefinierte Dekorateur:

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 - Base-Komponente mit @Component decorator:

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

}

3 - Sub-Komponente mit @CustomComponent decorator:

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

Plunkr mit komplette Beispiel.

Nun, dass Typoskript 2.2 unterstützt Mixins in Verbindung durch Klasse Ausdrücken wir haben einen viel besseren Weg, um auszudrücken, Mixins in Verbindung Komponenten. Beachten Sie, dass Sie können auch die Komponente der Vererbung, da eckige 2.3 (Diskussion) oder eine benutzerdefinierte Dekorateur wie bereits in anderen Antworten hier. Ich denke aber, Mixins in Verbindung haben einige Eigenschaften, die Sie besser für die Wiederverwendung von Verhalten ist in allen Komponenten:

• Mixins in Verbindung Komponieren flexibel, d.h. Sie können mix and match-Mixins in Verbindung, die auf bestehenden Komponenten oder kombinieren Mixins in Verbindung, um neue Komponenten
• Mixin Komposition bleibt einfach zu verstehen Dank seiner offensichtlichen Linearisierung einer Klasse Vererbungshierarchie
• Können Sie leichter vermeiden Sie Probleme mit der Dekorateure und Anmerkungen, die Pest Komponente der Vererbung (Diskussion)

Ich stark schlage vor, Sie Lesen das Typoskript 2.2 Ankündigung oben zu verstehen, wie Mixins in Verbindung arbeiten. Die verlinkten Diskussionen in eckigen GitHub issues liefern zusätzliche Details.

Benötigen Sie die folgenden Arten:

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

export class MixinRoot {
}

Dann können Sie erklären, ein Mixin wie diese Destroyable mixin, die hilft, die Komponenten zu behalten Abonnements an, die entsorgt werden müssten in 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
    }
  };
}

Zu mixin Destroyable in eine Component erklären Sie Ihre Komponente wie folgt:

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

Beachten Sie, dass MixinRoot ist nur erforderlich, wenn Sie möchten extend eine Mixin-Komposition. Sie können ganz einfach verlängern mehrere Mixins in Verbindung z.B. A extends B(C(D)). Dies ist die offensichtliche Linearisierung von Mixins in Verbindung, von denen ich Sprach oben, z.B. Sie effektiv verfassen inheritnace Hierarchie A -> B -> C -> D.

In anderen Fällen, z.B. wenn Sie wollen, zu Komponieren, Mixins in Verbindung, die auf eine vorhandene Klasse, die Sie anwenden können Mixins etwa so:

const MyClassWithMixin = MyMixin(MyClass);

Allerdings fand ich die erste Methode funktioniert am besten für Components und Directives wie diese müssen auch dekoriert werden mit @Component oder @Directive sowieso.

Soweit ich weiß Komponente der Vererbung ist noch nicht umgesetzt in den Winkel-2 und ich bin mir nicht sicher, ob Sie haben Pläne, aber da die Winkel-2 ist mit Maschinenschrift (wenn Sie sich entschieden haben, diesen Weg gehen) Sie können Klassen-Vererbung-by-doing -class MyClass extends OtherClass { ... }. Für die Komponente der Vererbung würde ich vorschlagen, dass Sie sich mit der Winkelgeschwindigkeit 2-Projekt, indem Sie zu https://github.com/angular/angular/issues und senden eine feature-Anfrage!

Wenn jemand sucht, für eine aktualisierte Lösung, Fernando Antwort ist ziemlich perfekt. Außer, dass ComponentMetadata ist veraltet. Mit Component stattdessen arbeitete für mich.

Den full-Custom-Decorator CustomDecorator.ts - Datei sieht wie folgt aus:

import 'zone.js';
import 'reflect-metadata';
import { Component } from '@angular/core';
import { isPresent } from "@angular/platform-browser/src/facade/lang";

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);
  }
}

Importieren Sie dann in Ihrem neuen Komponente sub-component.component.ts - Datei, und verwenden @CustomComponent statt @Component wie diese:

import { CustomComponent } from './CustomDecorator';
import { AbstractComponent } from 'path/to/file';

...

@CustomComponent({
  selector: 'subcomponent'
})
export class SubComponent extends AbstractComponent {

  constructor() {
    super();
  }

  //Add new logic here!
}

just use inheritance,Extend parent class in child class and declare constructor with parent class parameter and this parameter use in super().

1.parent class
@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,
    ){}
2.child class
@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);
        }
}