角输入组件继承

时间:2020-06-11 12:20:20

标签: angular typescript inheritance

我正在尝试制作一个名为“ Component A”的基本组件,该组件具有一个名为“ placeholder”的输入参数。

import { Component, Input, OnInit } from "@angular/core";
@Component({
  selector: "A-text-box",
  template: `
    <input [placeholder]="name" />
  `
})
export class AComponent implements OnInit {
  @Input() placeholder: string;

  constructor() {}
  ngOnInit(): void {}
}

然后尝试制作一个称为“ B Component”的子组件,该子组件是从“ Component A”继承的。

@Component({
  selector: "B-text-box",
  template: `
     <B-text-box></B-text-box>
  `
})
export class BComponent  extends AComponent implements OnInit{
   @Input() bComponentSomeInput : string;

  constructor() {
    super();
  }
  ngOnInit(): void {}
}

问题是,在app-component中使用组件B并设置“占位符”属性(从组件A继承来的)时,它没有读取该属性。

  @Component({
  selector: "app-root",
  template: `
    <B-text-box
      name="setting name from app component"
      bComponentSomeInput="some text"
    >
    </B-text-box>
  `
})
export class AppComponent {}

0 个答案:

没有答案