Come estendere / ereditare i componenti?

Vorrei creare estensioni per alcuni componenti già distribuiti in Angular 2, senza doverli riscrivere quasi completamente, poiché il componente di base potrebbe subire modifiche e desiderare che tali modifiche si riflettessero anche nei suoi componenti derivati.

Ho creato questo semplice esempio per cercare di spiegare meglio le mie domande:

Con il seguente componente di base app/base-panel.component.ts:

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'base-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class BasePanelComponent { 

  @Input() content: string;

  color: string = "red";

  onClick(event){
    console.log("Click color: " + this.color);
  }
}

Vorresti creare un altro componente derivato solo alterare, ad esempio, un comportamento di base del componente nel caso del colore di esempio app/my-panel.component.ts:

import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'

@Component({
    selector: 'my-panel',
    template: '<div class="panel" [style.background-color]="color" (click)="onClick($event)">{{content}}</div>',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class MyPanelComponent extends BasePanelComponent{

  constructor() {
    super();
    this.color = "blue";
  }
}

Esempio di lavoro completo in Plunker

Nota: ovviamente questo esempio è semplice e potrebbe essere risolto altrimenti non è necessario utilizzare l'ereditarietà, ma è inteso solo per illustrare il vero problema.

Come puoi vedere nell'implementazione del componente derivato app/my-panel.component.ts, gran parte dell'implementazione è stata ripetuta e la singola parte realmente ereditata è stata la class BasePanelComponent, ma @Componentin sostanza ha dovuto essere completamente ripetuta, non solo le parti modificate, come la selector: 'my-panel'.

Esiste un modo per creare un'eredità letteralmente piena di un componente Angular2, ereditando la classdefinizione dei segni / annotazioni, come ad esempio @Component?

Modifica 1 - Richiesta funzionalità

Richiesta di funzione angular2 aggiunta al progetto su GitHub: Estendi / Eredita annotazioni componenti angular2 # 7968

Modifica 2 - Richiesta chiusa

La richiesta è stata chiusa, per questo motivo , che per un breve periodo non saprebbe come unire il decoratore verrà effettuata. Lasciandoci senza opzioni. Quindi la mia opinione è citata nel numero .

Soluzione alternativa:

Questa risposta di Thierry Templier è un modo alternativo per aggirare il problema.

Dopo alcune domande con Thierry Templier, sono arrivato al seguente esempio di lavoro che soddisfa le mie aspettative come alternativa alla limitazione dell'eredità menzionata in questa domanda:

1 - Crea decoratore personalizzato:

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 - Componente di base con decoratore @Component:

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

}

3 - Componente secondario con decoratore @CustomComponent:

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

Plunkr con l'esempio completo.

Angular 2 versione 2.3 è stata appena rilasciata e include l'ereditarietà dei componenti nativi. Sembra che tu possa ereditare e sovrascrivere quello che vuoi, ad eccezione di modelli e stili. Alcuni riferimenti:

• Nuove funzionalità in Angular 2.3

• Eredità dei componenti in angolare 2

• Un Plunkr che dimostra l'ereditarietà dei componenti

Ora che TypeScript 2.2 supporta i mixin attraverso le espressioni di classe, abbiamo un modo molto migliore di esprimere i mixin sui componenti. Tieni presente che puoi anche utilizzare l'ereditarietà dei componenti dall'angolare 2.3 ( discussione ) o un decoratore personalizzato come discusso in altre risposte qui. Tuttavia, penso che i Mixin abbiano alcune proprietà che li rendono preferibili per il riutilizzo del comportamento tra i componenti:

• I mixin si compongono in modo più flessibile, ovvero è possibile mescolare e abbinare i mixin sui componenti esistenti o combinare i mixin per formare nuovi componenti
• La composizione di Mixin rimane facile da capire grazie alla sua ovvia linearizzazione a una gerarchia ereditaria di classe
• Puoi evitare più facilmente problemi con decoratori e annotazioni che affliggono l'ereditarietà dei componenti ( discussione )

Consiglio vivamente di leggere l'annuncio di TypeScript 2.2 sopra per capire come funzionano i Mixin. Le discussioni collegate su questioni angolari di GitHub forniscono ulteriori dettagli.

Avrai bisogno di questi tipi:

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

export class MixinRoot {
}

E quindi puoi dichiarare un Mixin come questo Destroyablemixin che aiuta i componenti a tenere traccia degli abbonamenti che devono essere disposti 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
    }
  };
}

Per mixare Destroyablein a Component, dichiari il tuo componente in questo modo:

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

Nota che MixinRootè necessario solo quando vuoi extenduna composizione Mixin. Puoi facilmente estendere più mixin ad es A extends B(C(D)). Questa è l'ovvia linearizzazione dei mixin di cui stavo parlando sopra, ad esempio stai componendo effettivamente una gerarchia di ereditarietà A -> B -> C -> D.

In altri casi, ad esempio quando si desidera comporre Mixin in una classe esistente, è possibile applicare il Mixin in questo modo:

const MyClassWithMixin = MyMixin(MyClass);

Tuttavia, ho trovato che il primo modo funziona meglio per Componentse Directives, dato che anche questi devono essere decorati @Componento @Directivecomunque.

aggiornare

L'ereditarietà dei componenti è supportata dalla 2.3.0-rc.0

originale

Finora, il più conveniente per me è quello di mantenere template e stili in separata *htmle *.cssfile e specificare chi attraverso templateUrle styleUrls, quindi è facile riutilizzabile.

@Component {
    selector: 'my-panel',
    templateUrl: 'app/components/panel.html', 
    styleUrls: ['app/components/panel.css']
}
export class MyPanelComponent extends BasePanelComponent

Per quanto ne so l'ereditarietà dei componenti non è stata ancora implementata in Angular 2 e non sono sicuro che abbiano dei piani, tuttavia poiché Angular 2 sta usando il dattiloscritto (se hai deciso di seguire quella strada) puoi usare l'ereditarietà delle classi facendo class MyClass extends OtherClass { ... }. Per l'ereditarietà dei componenti suggerirei di essere coinvolto nel progetto Angular 2 andando su https://github.com/angular/angular/issues e inviando una richiesta di funzionalità!

Cerchiamo di comprendere alcune limitazioni e funzionalità chiave sul sistema di ereditarietà dei componenti di Angular.

Il componente eredita solo la logica di classe:

• Tutti i metadati nel decoratore @Component non vengono ereditati.
• Le proprietà del componente @Input e le proprietà @Output vengono ereditate.
• Il ciclo di vita dei componenti non viene ereditato.

Queste caratteristiche sono molto importanti da tenere a mente, quindi esaminiamole ognuna in modo indipendente.

Il componente eredita solo la logica di classe

Quando si eredita un componente, tutta la logica interna viene ugualmente ereditata. Vale la pena notare che solo i membri pubblici vengono ereditati poiché i membri privati ​​sono accessibili solo nella classe che li implementa.

Tutti i metadati nel decoratore @Component non vengono ereditati

Il fatto che non vengano ereditati metadati potrebbe inizialmente sembrare controintuitivo ma, se ci pensate, ha perfettamente senso. Se erediti da un componente dire (componenteA), non vorrai che il selettore del componente A, da cui stai ereditando, sostituisca il selettore del componente B che è la classe che sta ereditando. Lo stesso si può dire per template / templateUrl e style / styleUrls.

Le proprietà Component @Input e @Output sono ereditate

Questa è un'altra caratteristica che adoro davvero dell'ereditarietà dei componenti in angolare. In una frase semplice, ogni volta che si dispone di una proprietà @Input e @Output personalizzata, queste proprietà vengono ereditate.

Il ciclo di vita dei componenti non viene ereditato

Questa parte è quella che non è così ovvia soprattutto per le persone che non hanno ampiamente lavorato con i principi OOP. Ad esempio, supponiamo che tu abbia ComponentA che implementa uno dei tanti hook del ciclo di vita di Angular come OnInit. Se si crea ComponentB e si eredita ComponentA, il ciclo di vita di OnInit da ComponentA non si attiverà finché non lo si chiama esplicitamente anche se si dispone di questo ciclo di vita di OnInit per ComponentB.

Chiamata ai metodi dei componenti Super / Base

Per avere il metodo ngOnInit () dal fuoco ComponentA, dobbiamo usare la super parola chiave e quindi chiamare il metodo di cui abbiamo bisogno che in questo caso è ngOnInit. La super parola chiave si riferisce all'istanza del componente che viene ereditato da cui in questo caso sarà ComponentA.

se leggi le librerie CDK e le librerie dei materiali, usano l'ereditarietà ma non tanto per i componenti stessi, la proiezione dei contenuti è re IMO. vedi questo link https://blog.angular-university.io/angular-ng-content/ dove dice "il problema chiave con questo design"

So che questo non risponde alla tua domanda, ma penso davvero che l'ereditarietà / estensione dei componenti debba essere evitata . Ecco il mio ragionamento:

Se la classe astratta estesa da due o più componenti contiene una logica condivisa: utilizzare un servizio o persino creare una nuova classe dattiloscritta che può essere condivisa tra i due componenti.

Se la classe astratta ... contiene variabili condivise o funzioni onClicketc, ci sarà la duplicazione tra l'html delle due viste dei componenti estendibili. Questa è una cattiva pratica e che l'html condiviso deve essere suddiviso in Componenti. Questi componenti (parti) possono essere condivisi tra i due componenti.

Mi mancano altri motivi per avere una classe astratta per i componenti?

Un esempio che ho visto di recente sono stati i componenti che estendono 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();
    });
  }
}

questo era bas perché in una grande base di codice infiniteSubscriptions.push()veniva usato solo 10 volte. Anche l'importazione e l'estensione AutoUnsubscriberichiede in realtà più codice rispetto alla semplice aggiunta mySubscription.unsubscribe()del ngOnDestroy()metodo del componente stesso, che ha richiesto comunque una logica aggiuntiva.

Se qualcuno è alla ricerca di una soluzione aggiornata, la risposta di Fernando è praticamente perfetta. Tranne che ComponentMetadataè stato deprecato. Usando Componentinvece ha funzionato per me.

Il CustomDecorator.tsfile completo di Decorator personalizzato è simile al seguente:

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

Quindi importalo nel tuo nuovo sub-component.component.tsfile componente e usa @CustomComponentinvece @Componentcosì:

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

...

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

  constructor() {
    super();
  }

  // Add new logic here!
}

Puoi ereditare @Input, @Output, @ViewChild, ecc. Guarda l'esempio:

@Component({
    template: ''
})
export class BaseComponent {
    @Input() someInput: any = 'something';

    @Output() someOutput: EventEmitter<void> = new EventEmitter<void>();

}

@Component({
    selector: 'app-derived',
    template: '<div (click)="someOutput.emit()">{{someInput}}</div>',
    providers: [
        { provide: BaseComponent, useExisting: DerivedComponent }
    ]
})
export class DerivedComponent {

}

I componenti possono essere estesi come l'eredità di una classe dattiloscritta, solo che devi sovrascrivere il selettore con un nuovo nome. Tutte le proprietà Input () e Output () del componente padre funzionano normalmente

Aggiornare

@Component è un decoratore,

I decoratori vengono applicati durante la dichiarazione di classe non sugli oggetti.

Fondamentalmente, i decoratori aggiungono alcuni metadati all'oggetto classe e ai quali non è possibile accedere tramite ereditarietà.

Se si desidera ottenere l'ereditarietà del decoratore, suggerirei di scrivere un decoratore personalizzato. Qualcosa come sotto esempio.

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

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

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