Wie Eltern Parameter von @Input Parameter zuzugreifen, die in der Kinderklasse Angular 2

Question

I Mutterkomponentenklasse in Mutter haben:

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

@Component({ 

}) 

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


    getConfig() 
    { 
    return this.config; 
    } 
} 

Und Kind-Klasse, die sie erweitert:

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']); 
    } 


} 

Deshalb möchte ich Zugriff in der Child-Klassenkonfigurationseigenschaft Konsolenprotokoll zeigt undefinierte Eigenschaft, aber die übergeordnete Vorlage ist:

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

</ion-content> 

Und Wertmast sein Objekt. Was ist falsch?

Answer 1

-Update 2.3.0

Sie jetzt die Vorteile der Objektvererbung für Komponenten erfolgen kann.

Siehe auch - https://github.com/angular/angular/commit/f5c8e0989d85bc064f689fc3595207dfb29413f4

Alte Version

Angular2 unterstützt nicht die volle Erbschaft

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

Als Abhilfe Sie eine benutzerdefinierte Dekorateur erstellen wie:

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); 
    }; 
}; 

Und verwenden Sie es mögen:

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

Plunker Example

Siehe auch - Issue with binding and @ViewChild