Angular组件可以通过Input Decorator来从其外部/父组件获取数据。在父组件中声明一个变量,并将其作为输入值传递到子组件中。在子组件中,声明一个带有@Input装饰器的变量,并使用它来接收父组件中传递的值。
以下是一个示例,其中ParentComponent中有一个变量parentName,它被传递到ChildComponent中的变量childName中:
// ParentComponent.html
// ParentComponent.ts import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template:
})
export class ParentComponent {
parentName = 'Parent Name';
}
// ChildComponent.ts import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: Name: {{ childName }}
})
export class ChildComponent {
@Input() childName: string = '';
}Child Component