假设有一个父组件 ParentComponent 和一个子组件 ChildComponent。ChildComponent 根据 ParentComponent 传递给它的属性渲染不同的内容。ChildComponent 还有一个子组件 GrandchildComponent,因此,ParentComponent 需要将某些属性传递给 GrandchildComponent。
下面是处理这个问题的步骤:
parent.component.ts:
export class ParentComponent {
grandchildInputs = { name: 'Grandchild', age: 12 };
}
child.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{name}}
Age: {{age}}
`
})
export class ChildComponent {
@Input() name: string;
@Input() age: number;
@Input() grandchildInputs: any;
}
grandchild.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-grandchild',
template: `
{{name}}
Age: {{age}}
{{desc}}
`
})
export class GrandchildComponent {
@Input() name: string;
@Input() age: number;
@Input() inputs: any;
get desc() {
return `${this.name} is ${this.age} years old and ${this.inputs.hobby}`;
}
}
parent.component.html:
现在 ParentComponent 将一个对象传递给了 ChildComponent,然后 ChildComponent 又将同样的对象传递给 GrandchildComponent。
这是嵌套 @Input 属性的一种解决方法,通过将属性存储
下一篇:Angular中的嵌套表单验证