“@”符号在Angular的主机绑定中表示输入属性。输入属性用于传递数据给组件。下面是一个简单的实例,其中包含一个自定义组件名为“my-component”,并且将一个名为“inputData”的输入属性传递给该组件。
my-component.component.ts文件:
import { Component,Input } from '@angular/core';
@Component({
selector: 'my-component',
template: `{{ inputData }}
`
})
export class MyComponent {
@Input() inputData: string;
}
在上面的代码中,我们通过使用@Input()修饰符将“inputData”属性标记为输入属性。然后在模板中使用插值表达式“{{ inputData }}”将输入属性的值显示出来。
在父组件的模板中,我们可以像下面这样使用它:
parent.component.html文件:
在上面的代码中,我们使用方括号将输入属性“inputData”绑定到字符串“Hello World”。这意味着我们将传递一个名为“inputData”的输入属性,并将其值设置为“Hello World”。这将在my-component组件中显示为:
Hello World
因此,在Angular的主机绑定中,“@”符号表示输入属性,用于传递数据给组件。