如何从子类Angular 2中的父级中的@Input参数访问父级参数答案

【问题标题】：How to access parent parameter from @Input parameter that in parent in child class Angular 2如何从子类Angular 2中的父级中的@Input参数访问父级参数
【发布时间】：2017-01-28 16:05:22
【问题描述】：

我有父组件类：

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

@Component({

})

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


  getConfig()
  {
    return this.config;
  }
}

以及扩展它的子类：

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


}

所以我想在子类配置属性中访问。控制台日志显示未定义的属性，但父模板是：

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

</ion-content>

并且值mast是Object。怎么了？

【问题讨论】：

标签： javascript angular components ionic2 extends

【解决方案1】：

更新 2.3.0

您现在可以利用组件的对象继承。

另请参阅 - https://github.com/angular/angular/commit/f5c8e0989d85bc064f689fc3595207dfb29413f4

旧版本

Angular2 不支持完全继承

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

作为解决方法，您可以创建一个自定义装饰器，例如：

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

并像这样使用它：

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

Plunker Example

另请参阅 - Issue with binding and @ViewChild

【讨论】：

非常感谢您