How to Extend / Inherit Angular Component2?

8

Doubt

I would like to create extensions for some components already implemented in Angular 2, without having to rewrite them almost completely, because the base component could undergo changes and I would like these changes to be reflected also in their derived components.

Example

I created this simple example to try to better expose my doubts:

With the following base component 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);
  }
}

I would like to create another derived component that would only change, for example, a behavior of the base component, in the case of example the color, 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(){
    this.color = "blue";
  }
}

Full and functional example in Plunker.

  

Note: Obviously this example is simple and could be solved in another way without needing to use inheritance, but it is only intended to illustrate the real problem.

Problem

As you can see from the implementation of the derived component app/my-panel.component.ts , much of the implementation was repeated, and the only part actually inherited was class BasePanelComponent , but @Component had to be basically repeated completely, and not just the changed parts, such as o selector: 'my-panel' .

Question

To some way to make a literally complete inheritance of an Angular component2, inheriting the definitions of class and markings / annotations, such as @Component ?

Edit 1 - Resource Request

  

Request functionality added to the angular2 project in GitHub: Extend / Inherit angular2 components annotations # 7968

p>

Edit 2 - Closed Request

  

The request has been closed, for that reason , which in brief would be not knowing how it will be done the blending of the decorator. Leaving us with no options. So my opinion is quoted in Issue , which in Portuguese would look something like:

     

"If Decorator / Annotation has these limitations, which according to their arguments can not easily be circumvented in the library, I ask you: Why use them? which would not be a better option ignore them / discard them for developing a library of the size and complexity of angular2? Or claiming to invest time / money in a library with primary limitations like the one listed in this issue? I believe this is still the time for large changes that can change angular direction2, since the library is still in RC1. It would be extremely disappointing to see a stable version of a library as angular2 being released with this kind of limitation. "

    
asked by anonymous 06.04.2016 / 20:26

1 answer

0

It does not make much sense to inherit the component class, if I understood correctly what you want to do is reuse components, if this is simple to do, just imagine that you are in HTML and bind in the property that was created in parent component, see this lesson from Loiane Groiner she explains just that: link

I hope I have helped.

A hug.

    
07.06.2017 / 03:59