Question

我有父组件类：

var source = webLayer.getSource();
var features = source.getFeatures();

var templateStyle = new ol.style.Style({
     fill: new ol.style.Fill({ color: convertHex(Layer.LayerStyle.FillColor, '0.5') }),
     stroke: new ol.style.Stroke({ color: convertHex(Layer.LayerStyle.LineColor, '0.5') }),
     text: new ol.style.Text({
        font: '24px Verdana',
        text: webLayer.U.label,
        offsetY: 20,
        fill: new ol.style.Fill({
            color: [255, 255, 255, 0.8]
        })
    })
});


var select = new ol.interaction.Select({
    style: templateStyle
});

map.addInteraction(select);
webLayer.setVisible(Visibility);
features[0].setStyle(templateStyle);

扩展它的子类：

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


}

值桅杆是对象。有什么问题？

Answer 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

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

1 个答案: