Недавно обнаружил довольно интересный способ оптимизировать написание кода при разработке компонентов в Angular 2.3.0, дело в том что, начиная с этой версии появилась возможность наследовать компонент, наследуется всё кроме шаблона. Появилась возможность создать родительский компонент, где можно прописать все необходимые сервисы, переменные, функции общего назначения, а потом наследовать дочерний компонент, главный плюс это возможность управлять дочерними компонентами из родительского (очень актуально в большом проекте где компонентов очень много). Но почему-то такой подход я не встречал в примерах кода, а наткнулся на него только когда сам заинтересовался.
Мой вопрос - нет ли подводных камней в использовании такого подхода? есть ли те кто успешно использовал наследование компонентов в своих проектах и остался этим доволен?
Вот пример кода родительский компонент:
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();
}
}
Дочерний компонент:
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 : '');
}
}
Очень интересно ваше мнение. Спасибо за внимание!