Question

早上好。我不知道@Input（）是如何工作的，如标题所示。

在许多例子中，我们看到了

的使用

@Input() inputArgument:any;

我搜索了@Input的语法定义。

在directives.d.ts中，输入的定义如下。

export interface Input {
    /**
     * Name used when instantiating a component in the template.
     */
    bindingPropertyName?: string;
}

首先。符号（@）符号如何工作？

我学习了Interface的一个例子如下。

interface InterfaceTest {
  dataOne: string,
  dataTwo?: string
}

class implTest implements InterfaceTest{
  dataOne = 'impleSuccess';
}

但是，尽管界面相同，为什么（输入）有一个at符号（@）？

其次，如何在接口Input中将[@Input（）something：anytype]代码分配给bindingPropertyName？

谢谢你！

Answer 1

顾名思义，@Input()定义了一个输入绑定，连接到组件选择器。

在其他组件Html中使用您的选择器时，您可以通过以下方式来处理此变量：

<your-component-selector [yourInputVariable]="'test'"></your-component-selector>

在your-component-selector组件中，您可以按如下方式定义输入：

Import { Component, Input } from '@angular/core'

@Component({
    selector: 'your-component-selector',
    templateUrl: './your.component.html',
    styleUrls: ['./your.component.scss']
})

export class YourComponent {
    @Input('yourInputVariable')
    inputVariable: string;        //<-- this will result to 'test'
}

阅读教程https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding以获取更多信息！

我不知道这是怎么回事。 Angular中的@Input（）

1 个答案: