Angular中主机绑定中的“@是什么意思？ _编程开发

Angular中主机绑定中的“@是什么意思？

创始人

2024-10-31 20:31:59

0次

“@”符号在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的主机绑定中，“@”符号表示输入属性，用于传递数据给组件。

上一篇：Angular中转义字符问题

下一篇：Angular中注入JWT令牌的Cookies

Angular中主机绑定中的“@是什么意思？

{{ inputData }}

Hello World

相关内容

热门资讯