How to access parent parameter from @Input parameter that in parent in child class Angular 2

Question

I have parent component class:

import {Component, OnInit, Input} from '@angular/core';

@Component({

})

export abstract class AbstractBlock{
  //Входящие данные
  @Input() config: any;


  getConfig()
  {
    return this.config;
  }
}

And child class that extends it:

import {Component, Input, OnInit} from '@angular/core';
import { BannersService } from "../../modelservices/catalog/bannersservice";
import { BannerItem } from "../../modelservices/catalog/items/banner";
import {AbstractBlock} from "../abstractblock";

@Component({
  selector: 'blocks-banners-slideshow', //Селектор
  templateUrl: 'build/templates/default/blocks/banners/slideshow.html', //Шаблон
  styleUrls: [ //Свои стили
    'resource/default/css/banners/slideshow.css'
  ],
  providers: [
    BannersService
  ] //Нужные API
})

export class BannersSlideShow extends AbstractBlock implements OnInit{
  list: Array<BannerItem>;
  mySlideOptions: any;

  @Input() slideOptions = {};


  constructor(
    private bannersService: BannersService
  ){
    super();
  }


  ngOnInit()
  {
    this.list = [];
    this.mySlideOptions = this.slideOptions;
    console.log(this.getConfig());
    console.log(this.config);
   // this.getItems(); //Подгружим список
  }



  getItems()
  {
    this.bannersService.add(this.config['zone'], {
      title: 'Привет, медвед',
      url: 'http://example.com/banner.jpg'
    });
    this.bannersService.add(this.config['zone'], {
      title: 'Привет, медвед 2',
      url: 'http://example.com/banner.jpg'
    });
    this.list = this.bannersService.getList(this.config['zone']);
  }


}

So I want to access in child class config property. Console log shows undefined property, but parent template is:

<ion-content>
  <blocks-banners-slideshow #block class="contentBlock" [config]="{zone: 'main'}" [slideOptions]="{loop: true}"></blocks-banners-slideshow>

</ion-content>

And value mast be Object. What is wrong?

Answer 1

Update 2.3.0

You can now take advantage of object inheritance for components.

See also - https://github.com/angular/angular/commit/f5c8e0989d85bc064f689fc3595207dfb29413f4

Old version

Angular2 doesn't support the full inheritance

• https://github.com/angular/angular/issues/7968#issuecomment-219865739

As workaround you can create a custom decorator like:

function InheritPropMetadata() {
  return (target: Function) => {
    const targetProps = Reflect.getMetadata('propMetadata', target);

    const parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    const parentProps = Reflect.getMetadata('propMetadata', parentTarget);

    const mergedProps = Object.assign(targetProps, parentProps);

    Reflect.defineMetadata('propMetadata', mergedProps, target);
  };
};

And use it like:

@InheritPropMetadata()
export class BannersSlideShow extends AbstractBlock implements OnInit{

Plunker Example

See also - Issue with binding and @ViewChild