Recently I discovered a rather interesting way to optimize the writing of code when developing components in Angular 2.3.0, the fact is that, starting from this version, it became possible to inherit a component, everything except the template is inherited. Now you can create a parent component where you can register all the necessary services, variables, general purpose functions, and then inherit the child component, the main plus is the ability to manage the child components from the parent component (very important in a large project where there are a lot of components). But for some reason I didn’t see such an approach in the code examples, and came across it only when I became interested.

My question is - are there any pitfalls in using this approach? Are there those who successfully used component inheritance in their projects and were satisfied with it?

Here is an example of the parent component code:

import { Component, OnInit, OnDestroy, NgModule, Input, Output, EventEmitter, HostBinding, HostListener, Injector } from '@angular/core'; import { ActivatedRoute, Router } from "@angular/router"; import { TranslateService } from "@ngx-translate/core"; import { LogService, FlashMessagesService, UrlService, ListDTO, QueryParams, ComponentPreloader } from "../../shared"; import { ItemNotFound, DialogConfirm } from '../block'; import { DialogService } from "ng2-bootstrap-modal"; import {GrantDTO} from '../grant'; import { Subscription } from 'rxjs/Subscription'; import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/delay'; @Component({ selector: 'meta-data-component', template: '' }) export class MetaDataComponent<T> implements OnInit, OnDestroy { protected log: LogService; protected flashMessage: FlashMessagesService; protected url: UrlService; protected route: ActivatedRoute; protected router: Router; protected translate: TranslateService; protected dialogService: DialogService; protected Grant = GrantDTO; protected subscription: Subscription; protected isLoading = true; protected list: ListDTO<T>; protected phraseNotFound = 'No data found'; @Input() baseUrl: string = ''; constructor(injector: Injector) { this.log = injector.get(LogService); this.flashMessage = injector.get(FlashMessagesService); this.url = injector.get(UrlService); this.route = injector.get(ActivatedRoute); this.router = injector.get(Router); this.translate = injector.get(TranslateService); this.dialogService = injector.get(DialogService); } ngOnInit() { this.log.debug(this, 'OnInit'); } ngOnDestroy() { this.log.debug(this, 'OnDestroy'); this.subscription.unsubscribe(); } }

Child component:

 import { Component, Injector } from "@angular/core"; import { MetaDataComponent } from "../block"; import { ListDTO } from "../../shared"; import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/do'; import { ClientRestService } from './client.rest'; import { ClientDTO } from './client.dto'; @Component({ selector: 'client-card', templateUrl: 'client.card.html', styleUrls: ['./client.card.scss'] }) export class ClientCard extends MetaDataComponent<ClientDTO> { public query: string; private phone: string; constructor( injector: Injector, private restService: ClientRestService ) { super(injector); } ngOnInit() { super.ngOnInit(); //далее произвольный код } getCarTitle(car: any): string { return car.carType + (car.description ? ': ' + car.description : ''); } }

Very interesting your opinion. Thanks for attention!

  • Is the question still relevant? - overthesanity 5:56
  • If you have an opinion on the issue, in any case it will be interesting - Oleg Averkov

1 answer 1

Inherited components from PrimeNg , at least 4 classes. I interrupted styles on SCSS instead of CSS, copied the pattern, the logic was raised by simple inheritance. No problems, production, life cycle interfaces are also working out.

  • one
    Thank you for answering my question, once again I am convinced that it is worth using component inheritance. If it's not a secret, how did you get to the template of the parent component? - Oleg Averkov Nov.
  • one
    Through githab, open source. :) There he was inline, I made it to the file, I did not see the difference. - Pepper Roman
  • one
    aaa it is clear, I thought it was just about the inheritance of the parent template, the fact is that if you can manage to get to the parent component template from the child, here I saw an example [ stackoverflow.com/a/38077209/5533633] , but it seemed to me a crutch , and there is no urgent need for it yet, I thought you might have some other option - Oleg Averkov
  • one
    In general, also has the right to life, if you can not get to the source. - Peretsev Roman
  • And the styles of the parent component can somehow be inherited into children? - mistbow