Bagaimana cara memperpanjang / mewarisi komponen?

Saya ingin membuat ekstensi untuk beberapa komponen yang sudah digunakan di Angular 2, tanpa harus menulis ulang mereka hampir sepenuhnya, karena komponen dasar dapat mengalami perubahan dan berharap perubahan ini juga tercermin dalam komponen turunannya.

Saya membuat contoh sederhana ini untuk mencoba menjelaskan pertanyaan saya dengan lebih baik:

Dengan komponen dasar berikut 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);
  }
}

Apakah Anda ingin membuat komponen turunan lain hanya alter, misalnya, perilaku komponen dasar dalam kasus contoh warna, 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";
  }
}

Contoh kerja lengkap di Plunker

Catatan: Jelas contoh ini sederhana dan dapat diselesaikan jika tidak perlu menggunakan warisan, tetapi ini dimaksudkan hanya untuk menggambarkan masalah sebenarnya.

Seperti yang Anda lihat dalam implementasi komponen turunan app/my-panel.component.ts, banyak implementasi diulangi, dan satu bagian yang benar-benar diwariskan adalah class BasePanelComponent, tetapi pada @Componentdasarnya harus diulangi sepenuhnya, bukan hanya bagian yang diubah, seperti selector: 'my-panel'.

Apakah ada cara untuk membuat warisan penuh komponen Angular2, yang mewarisi classdefinisi tanda / anotasi, misalnya @Component?

Sunting 1 - Permintaan Fitur

Permintaan fitur angular2 ditambahkan ke proyek di GitHub: Memperpanjang / Mewarisi komponen angular2 penjelasan # 7968

Sunting 2 - Permintaan Tertutup

Permintaan ditutup, karena alasan ini , bahwa sebentar tidak akan tahu bagaimana menggabungkan dekorator yang akan dibuat. Meninggalkan kami tanpa opsi. Jadi pendapat saya dikutip dalam Issue .

Solusi alternatif:

Jawaban Thierry Templier ini adalah cara alternatif untuk menyelesaikan masalah.

Setelah beberapa pertanyaan dengan Thierry Templier, saya sampai pada contoh kerja berikut yang memenuhi harapan saya sebagai alternatif pembatasan warisan yang disebutkan dalam pertanyaan ini:

1 - Buat dekorator khusus:

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 - Komponen Dasar dengan dekorator @Component:

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

}

3 - Sub komponen dengan dekorator @CustomComponent:

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

Plunkr dengan contoh lengkap.

Angular 2 versi 2.3 baru saja dirilis, dan itu termasuk warisan komponen asli. Sepertinya Anda dapat mewarisi dan menimpa apa pun yang Anda inginkan, kecuali untuk template dan gaya. Beberapa referensi:

• Fitur baru di Angular 2.3

• Komponen Warisan dalam Angular 2

• Plunkr mendemonstrasikan pewarisan komponen

Sekarang TypeScript 2.2 mendukung Mixin melalui ekspresi Kelas, kami memiliki cara yang jauh lebih baik untuk mengekspresikan Mixin pada Komponen. Perlu diketahui bahwa Anda juga dapat menggunakan warisan Komponen sejak sudut 2.3 ( diskusi ) atau dekorator khusus seperti yang dibahas dalam jawaban lain di sini. Namun, saya pikir Mixin memiliki beberapa properti yang membuatnya lebih disukai untuk menggunakan kembali perilaku di seluruh komponen:

• Mixin menyusun lebih fleksibel, yaitu Anda dapat mencampur dan mencocokkan Mixin pada komponen yang ada atau menggabungkan Mixin untuk membentuk Komponen baru
• Komposisi Mixin tetap mudah dipahami berkat linierasinya yang jelas ke hierarki pewarisan kelas
• Anda dapat lebih mudah menghindari masalah dengan dekorator dan anotasi yang mengganggu pewarisan komponen ( diskusi )

Saya sangat menyarankan Anda membaca pengumuman TypeScript 2.2 di atas untuk memahami cara kerja Mixins. Diskusi terkait dalam masalah sudut GitHub memberikan detail tambahan.

Anda membutuhkan jenis-jenis ini:

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

export class MixinRoot {
}

Dan kemudian Anda dapat mendeklarasikan Mixin seperti ini Destroyablemixin yang membantu komponen melacak langganan yang perlu dibuang di 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
    }
  };
}

Untuk mencampur Destroyablemenjadi Component, Anda mendeklarasikan komponen Anda seperti ini:

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

Perhatikan bahwa MixinRoothanya diperlukan ketika Anda ingin extendkomposisi Mixin. Anda dapat dengan mudah memperluas beberapa mixins misalnya A extends B(C(D)). Ini adalah linierisasi yang jelas dari mixin yang saya bicarakan di atas, misalnya Anda secara efektif menyusun hierarki warisan A -> B -> C -> D.

Dalam kasus lain, misalnya ketika Anda ingin membuat Mixin pada kelas yang ada, Anda dapat menerapkan Mixin seperti:

const MyClassWithMixin = MyMixin(MyClass);

Namun, saya menemukan cara pertama bekerja paling baik untuk Componentsdan Directives, karena ini juga perlu dihiasi @Componentatau @Directivetetap.

memperbarui

Pewarisan komponen didukung sejak 2.3.0-rc.0

asli

Sejauh ini, yang paling nyaman bagi saya adalah untuk menjaga template & style menjadi file *html& terpisah *.cssdan tentukan melalui templateUrldan styleUrls, jadi mudah digunakan kembali.

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

Sejauh yang saya tahu komponen inheritance belum diimplementasikan di Angular 2 dan saya tidak yakin apakah mereka memiliki rencana untuk melakukannya, namun karena Angular 2 menggunakan skrip (jika Anda memutuskan untuk menggunakan rute itu), Anda dapat menggunakan pewarisan kelas dengan melakukan class MyClass extends OtherClass { ... }. Untuk pewarisan komponen, saya sarankan untuk terlibat dengan proyek Angular 2 dengan membuka https://github.com/angular/angular/issues dan mengirimkan permintaan fitur!

Mari kita pahami beberapa batasan & fitur utama pada sistem pewarisan komponen Angular.

Komponen hanya mewarisi logika kelas:

• Semua meta-data di dekorator @Component tidak diwariskan.
• Properti @Input properti dan properti @Output diwarisi.
• Daur hidup komponen tidak diwarisi.

Fitur-fitur ini sangat penting untuk diingat, jadi mari kita periksa masing-masing secara mandiri.

Komponen hanya mewarisi logika kelas

Saat Anda mewarisi Komponen, semua logika di dalamnya sama-sama diwarisi. Perlu dicatat bahwa hanya anggota publik yang diwarisi karena anggota pribadi hanya dapat diakses di kelas yang mengimplementasikannya.

Semua meta-data di dekorator @Component tidak diwariskan

Fakta bahwa tidak ada meta-data yang diwariskan mungkin tampak kontra-intuitif pada awalnya tetapi, jika Anda berpikir tentang hal ini sebenarnya masuk akal. Jika Anda mewarisi dari Component say (componentA), Anda tidak ingin pemilih ComponentA, yang Anda warisi untuk menggantikan pemilih ComponentB yang merupakan kelas yang mewarisi. Hal yang sama dapat dikatakan untuk template / templateUrl serta style / styleUrls.

Properti Component @Input dan @Output diwarisi

Ini adalah fitur lain yang sangat saya sukai tentang komponen Inheritance in Angular. Dalam kalimat sederhana, setiap kali Anda memiliki properti @Input dan @Output khusus, properti ini akan diwarisi.

Daur hidup komponen tidak diwarisi

Bagian ini adalah salah satu yang tidak begitu jelas terutama bagi orang-orang yang belum banyak bekerja dengan prinsip-prinsip OOP. Misalnya, Anda memiliki ComponentA yang mengimplementasikan salah satu dari banyak kait siklus hidup Angular seperti OnInit. Jika Anda membuat ComponentB dan mewarisi ComponentA, siklus hidup OnInit dari ComponentA tidak akan aktif hingga Anda menyebutnya secara eksplisit bahkan jika Anda memiliki siklus hidup OnInit untuk ComponentB.

Memanggil Metode Komponen Super / Base

Untuk mendapatkan metode ngOnInit () dari ComponentA fire, kita perlu menggunakan kata kunci super dan memanggil metode yang kita butuhkan yang dalam hal ini adalah ngOnInit. Kata kunci super mengacu pada instance komponen yang sedang diwarisi dari mana dalam hal ini akan menjadi ComponentA.

jika Anda membaca perpustakaan CDK dan perpustakaan material, mereka menggunakan warisan tetapi tidak terlalu banyak untuk komponen itu sendiri, proyeksi konten adalah raja IMO. lihat tautan ini https://blog.angular-university.io/angular-ng-content/ di mana dikatakan "masalah utama dengan desain ini"

Saya tahu ini tidak menjawab pertanyaan Anda tetapi saya benar-benar berpikir mewarisi / memperluas komponen harus dihindari . Inilah alasan saya:

Jika kelas abstrak yang diperluas oleh dua atau lebih komponen berisi logika bersama: gunakan layanan atau bahkan buat kelas skrip baru yang dapat dibagi antara dua komponen.

Jika kelas abstrak ... berisi variabel yang dibagi atau fungsi onClicketc, Maka akan ada duplikasi antara html dari dua tampilan komponen yang diperluas. Ini adalah praktik buruk & html yang dibagikan harus dipecah menjadi Komponen. Komponen-komponen ini dapat dibagi antara dua komponen.

Apakah saya kehilangan alasan lain untuk memiliki kelas abstrak untuk komponen?

Contoh yang saya lihat baru-baru ini adalah komponen yang memperpanjang 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();
    });
  }
}

ini bas karena seluruh basis kode yang besar, infiniteSubscriptions.push()hanya digunakan 10 kali. Juga mengimpor & memperpanjang AutoUnsubscribebenar-benar membutuhkan lebih dari sekedar kode menambahkan mySubscription.unsubscribe()dalam ngOnDestroy()metode komponen itu sendiri, yang diperlukan logika tambahan pula.

Jika ada yang mencari solusi yang diperbarui, jawaban Fernando cukup sempurna. Kecuali itu ComponentMetadatasudah usang. Menggunakannya Componentmalah bekerja untuk saya.

CustomDecorator.tsFile Dekorator Kustom lengkap terlihat seperti ini:

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

Kemudian impor ke sub-component.component.tsfile komponen baru Anda dan gunakan @CustomComponentalih-alih @Componentseperti ini:

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

...

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

  constructor() {
    super();
  }

  // Add new logic here!
}

Anda dapat mewarisi @Input, @Output, @ViewChild, dll. Lihatlah contoh:

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

}

Komponen dapat diperluas sama dengan warisan kelas naskah, hanya saja Anda harus menimpa pemilih dengan nama baru. Semua Properti Input () dan Output () dari Komponen Induk berfungsi seperti biasa

Memperbarui

@Component adalah dekorator,

Dekorator diterapkan selama deklarasi kelas bukan pada objek.

Pada dasarnya, dekorator menambahkan beberapa metadata ke objek kelas dan itu tidak dapat diakses melalui pewarisan.

Jika Anda ingin mencapai Warisan Dekorator, saya sarankan menulis dekorator khusus. Contohnya seperti di bawah ini.

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

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