在Angular中,可以使用@Input()装饰器来接收父组件传递的数据,以缩短当前组件中函数的长度。
例如,在子组件中定义一个属性,用@Input()标记为一个输入属性,并在组件中使用:
import { Component, Input } from '@angular/core';
@Component({
selector: 'child-component',
template: {{message}}
})
export class ChildComponent { @Input() message: string;
constructor() {} }
在父组件中,可以将数据通过属性绑定的方式传递给子组件:
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template:
})
export class ParentComponent { messageFromParent = 'Hello from Parent';
constructor() {} }
这样,子组件中就可以直接引用传递而来的属性值,并不需要再写一大段处理函数来获取父组件中的数据了。