Bagaimana cara memperpanjang / mewarisi komponen?


160

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 .



Ok NicolasB. Tapi masalah saya adalah dengan pewarisan dekorator @Component, yang tidak diterapkan pada metadata warisan. = /
Fernando Leal

orang, harap hindari menggunakan warisan dengan sudut. misalnya kelas ekspor PlannedFilterComponent memperluas AbstractFilterComponent mengimplementasikan OnInit {sangat buruk. Ada cara lain untuk membagikan kode mis. Layanan & komponen yang lebih kecil. Warisan bukan cara sudut. Saya pada proyek sudut di mana mereka menggunakan warisan dan ada hal-hal yang rusak seperti mengekspor komponen yang mewarisi dari komponen abstrak hilang input dari kelas abstrak
robert king

1
alih-alih gunakan proyeksi konten, mis. github.com/angular/components/blob/master/src/material/card/… jangan gunakan pewarisan
robert king

Jawaban:


39

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.


3
Saya berasumsi bahwa ini tidak akan kompatibel dengan kompiler template offline.
Günter Zöchbauer

@ GünterZöchbauer, saya tidak memiliki pengetahuan tentang "template kompiler offline" dari Angular2. Tapi saya pikir itu mungkin tidak kompatibel, dan itu akan menjadi pilihan alternatif. Di mana mode "kompiler template offline" dari Angular2 akan berguna? Anda dapat menunjukkan sesuatu kepada saya untuk lebih memahami tentang ini? Jadi saya bisa memahami pentingnya kompatibilitas ini untuk proyek saya.
Fernando Leal

Compiler template offline (OTC) belum berfungsi meskipun sudah termasuk dalam RC.3. OTC akan menganalisis dekorator dan menghasilkan kode selama langkah pembangunan ketika penyebaran digunakan. OTC memungkinkan untuk menghapus parser dan kompiler Angular2 yang memproses dekorator dan binding saat runtime, yang mengarah pada ukuran kode yang lebih kecil dan aplikasi yang lebih cepat serta inisialisasi komponen. OTC mungkin akan dapat digunakan dengan salah satu pembaruan berikutnya.
Günter Zöchbauer

1
@ GünterZöchbauer, sekarang saya mengerti pentingnya menjaga fungsionalitas yang kompatibel dengan OTC. Ini akan menjadi pra-kompilasi dekorator sudut yang mengurangi overhead untuk menginisialisasi komponen. Saya ingin tahu tentang fungsi proses ini dan karena solusi dari jawaban ini tidak akan kompatibel dengan OTC? Bagaimana pra-kompilasi dekorator? Memiliki pengetahuan ini, kita mungkin memikirkan sesuatu untuk menjaga alternatif fungsional OTC ini. Terimakasih atas klarifikasinya!
Fernando Leal

24

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:


Satu "gotcha" di sini terjadi ketika Anda lupa menentukan "pemilih" baru dalam komponen anak. Anda akan mendapatkan kesalahan runtime di sepanjang baris More than one component matched on this elementjika Anda tidak.
The Aelfinn

@TheAelfinn Ya: setiap komponen harus memiliki spesifikasi lengkap dalam @Component()tag. Tapi, Anda bisa membagikan .html atau .css dengan merujuk ke file yang sama jika Anda mau. Semua dalam semua, ini merupakan nilai tambah besar .
Daniel Griscom

Dalam tautan kedua Anda scotch.io/tutorials/component-inheritance-in-angular-2 , penulis mengklaim bahwa komponen mewarisi layanan injeksi ketergantungan orang tua mereka, kode saya menyarankan sebaliknya. Bisakah Anda mengonfirmasi bahwa ini didukung?
The Aelfinn

18

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.


ini luar biasa! Terima kasih untuk sarannya. Apakah MixinRoot hanya digunakan sebagai placeholder kelas kosong di sini? hanya ingin memastikan pemahaman saya benar.
Alex Lockwood

@AlexLockwood ya, placeholder kelas kosong adalah persis apa yang saya gunakan untuk itu. Saya dengan senang hati menghindari menggunakannya tetapi untuk saat ini saya belum menemukan cara yang lebih baik untuk melakukannya.
Johannes Rudolph

2
Saya akhirnya menggunakan function Destroyable<T extends Constructor<{}>>(Base = class { } as T). Dengan begitu saya bisa membuat mixin menggunakan extends Destroyable().
Alex Lockwood

1
Ini terlihat sangat bagus, namun sepertinya AoT build (Cli1.3) menghapus ngOnDestroy dari DashBoardComponent karena tidak pernah dipanggil. (Hal yang sama berlaku untuk ngOnInit)
dzolnjan

terima kasih atas solusi ini. Namun setelah pembentukan produk dengan ionik atau angular-cli, mixin tidak bekerja, seolah-olah itu belum diperpanjang.
Han Che

16

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

2
Inilah yang saya butuhkan. Seperti apa dekorator @Component untuk BasePanelComponent? Bisakah itu merujuk file html / css yang berbeda? Bisakah itu mereferensikan file html / css yang sama direferensikan oleh MyPanelComponent?
ebhh2001

1
Ini bukan warisan @Input()dan @Output()dekorator, bukan?
Leon Adler

10

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!


Mengerti, saya akan coba di hari-hari berikutnya iterasi proyek angular2 saya dan memverifikasi fitur permintaan tidak lagi dalam masalah proyek di Git dan jika tidak saya akan menyusun permintaan untuk sumber daya, karena menurut saya itu sangat menarik fitur. Adakah ide argumen tambahan untuk membuat permintaan paling menarik?
Fernando Leal

1
Mengenai naskah naskah sumber daya warisan yang sudah saya gunakan dalam solusi awal saya ( export class MyPanelComponent extends BasePanelComponent), masalahnya hanya dalam kasus Anotasi / Dekorator yang tidak diwariskan.
Fernando Leal

1
Ya, saya benar-benar tidak tahu apa lagi yang bisa Anda tambahkan. Saya suka ide memiliki dekorator baru (sesuatu seperti @SubComponent()) yang menandai kelas sebagai subkomponen atau memiliki bidang tambahan pada @Componentdekorator yang memungkinkan Anda untuk referensi komponen induk untuk diwarisi.
watzon

1
Permintaan fitur angular2 ditambahkan ke proyek pada GitHub: Memperpanjang / Mewarisi komponen angular2 penjelasan # 7968
Fernando Leal

9

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.


5

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.


Oke, saya mengerti kolokasi Anda dan saya setuju bahwa agregasi hampir menyelesaikan semua masalah yang tampaknya membutuhkan warisan. Dan selalu menarik untuk menganggap komponen sebagai bagian kecil dari aplikasi yang dapat merapat dengan berbagai cara. Tetapi dalam kasus pertanyaan masalahnya adalah bahwa saya tidak memiliki kontrol / akses ke modifikasi pada komponen yang ingin saya warisi (ini adalah komponen ketiga), maka agregasi akan menjadi tidak layak, dan pewarisan akan menjadi solusi ideal.
Fernando Leal

mengapa Anda tidak bisa membuat komponen baru yang merangkum komponen pihak ketiga itu? Apa komponen pihak ketiga Anda yang tidak menarik? mis. <kalender saya [barang] = barang> <kalender pihak ketiga [barang] = barang> </ ..> </ ..>
robert king

@robertking mengulangi diri sendiri adalah pola yang sangat lemah ... Itu sebabnya Anda akan mulai membenci pekerjaan Anda .. bukannya menikmatinya.
Dariusz Filipiak

Bagi saya itu adalah ide yang baik untuk memperluas komponen jika Anda ingin memiliki params Input / Output yang sama untuk satu set komponen, sehingga mereka bisa berperilaku sebagai satu. Misalnya saya memiliki beberapa langkah pendaftaran (credentialsStep, addressStep, selectBenefitsStep). Mereka semua harus memiliki opsi Input yang sama (stepName, actionButtons ...) dan Output (lengkap, batalkan).
Sergey_T

@Sergey_T dapatkah Anda mempertimbangkan satu komponen dengan proyeksi pilih dan konten? Mengulangi beberapa input juga sepertinya tidak menghemat banyak fungsi TBH.
robert king

2

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!
}

Apakah dekorator khusus tidak berkecil hati? Dari banyak post / utas lainnya solusi ini telah ditandai sebagai sepenuhnya salah karena AOT tidak akan mendukungnya?
TerNovi

2

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 {

}

1

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


Bisakah Anda mencontohkan (menggunakan contoh pertanyaan) bagaimana cara kerjanya? Anda bisa menggunakan stackblitz untuk mengembangkan contoh dan membagikan tautan.
Fernando Leal

@Component adalah dekorator, Dekorator diterapkan selama deklarasi kelas bukan pada objek.
MAHESH VALIYA VEETIL

Kamu benar. Dekorator tidak membuat perbedaan. Ini diperlukan hanya jika komponen dasar digunakan sebagai komponen di tempat lain
MAHESH VALIYA VEETIL

0
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);
        }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.