在Angular中,@Input装饰器用于使组件接受外部输入属性。下面是一个包含@Input属性的组件示例:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-mycomponent',
template: My name is {{ name }}
})
export class MyComponent {
@Input() name: string;
}
该组件拥有一个@Input()装饰器,它将name属性标记为输入属性。现在,父组件可以通过这个属性为子组件提供值。
import { Component } from '@angular/core'; import { MyComponent } from './my-component';
@Component({
selector: 'app-parent',
template:
})
export class ParentComponent {
myName = 'John Doe';
}
在这个例子中,父组件ParentComponent为子组件MyComponent提供了一个名为myName的属性。该属性的值将被传递到子组件中并显示出来,从而展示了@Input装饰器的作用。