如何从@Input参数中访问parent参数，该参数在子类中是parent

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

本文关键字：参数 parent 子类 访问 @Input      更新时间：2023-09-26

我有父组件类:

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>

value为Object。怎么了?

更新tripwire

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

见也——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{
<<p> 恰好例子/strong>

见也绑定和@ViewChild

的问题
相关文章：