在Angular中,@Input装饰器用于将属性标记为一个输入属性,该属性的值将由父组件传递给子组件。如果@Input装饰器标记的属性始终为空,可能有以下几个原因:
父组件的模板示例:
父组件的类示例:
export class ParentComponent {
parentValue = 'Hello';
}
子组件的类示例:
export class ChildComponent {
@Input() inputProp: string;
ngOnInit() {
console.log(this.inputProp); // 输出:Hello
}
}
父组件的模板示例:
子组件的类示例:
export class ChildComponent {
@Input() inputProp: string; // 输入属性名称与父组件传递的属性名称不匹配
ngOnInit() {
console.log(this.inputProp); // 输出:undefined
}
}
应该修改为:
export class ChildComponent {
@Input() input: string; // 与父组件传递的属性名称一致
ngOnInit() {
console.log(this.input); // 输出:Hello
}
}
父组件的模板示例:
子组件的类示例:
export class ChildComponent {
@Input() inputProp: string;
ngAfterViewInit() {
console.log(this.inputProp); // 输出:Hello
}
}
通过检查这些可能的原因,你应该能够解决Angular组件的@Input始终为空的设置问题。