我正在尝试制作一个名为“ 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 {}