在Angular中,@Input属性不以感叹号结尾。感叹号结尾的特殊语法是用来表示属性可以是可选的,而不是必须的。
下面是一个示例代码,演示了如何在Angular中使用@Input属性:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
Child Component
Received value: {{ inputValue }}
`
})
export class ChildComponent {
@Input() inputValue: string;
}
@Component({
selector: 'app-parent',
template: `
Parent Component
`
})
export class ParentComponent {
parentValue: string = 'Hello from parent component';
}
在上面的代码中,父组件ParentComponent
通过属性绑定将parentValue
的值传递给子组件ChildComponent
的inputValue
属性。子组件通过插值表达式{{ inputValue }}
显示接收到的值。
请注意,@Input()
装饰器用于标记一个属性是可输入的,并且可以从父组件传递值。没有感叹号结尾表示该属性是可选的,可以不传值。
希望这个例子能帮助你理解Angular中的@Input属性的用法。