Angular 4标记中的[property] =和property有什么区别? [英] What is the difference between [property]= and property in Angular 4 markup?

问题描述

让我们对PrimeNG表进行以下标记

So lets have following markup for PrimeNG table

<p-dataTable
    selectionMode="multiple"
    [(selection)]="selectedUsers"
    dataKey="id"
    [value]="users">

在selectionMode="multiple"和[selection]="multiple"之间显然存在差异，因为第二个变量不能使表成为可选择的.有什么区别?

There obviously is a difference between selectionMode="multiple" and [selection]="multiple" as second variand does not make table selectable. What is the difference??

有一会儿我以为property=会设置一次值，而[property]=会将该属性绑定到输入值，以便反映其更改，但是如果是这种情况，则在两个变体中，表的行为应相同我的情况.

For a moment i thought that property= will set value once while [property]= would bind that property to input value so it would reflect its changes, but if that is the case, in both variants table should behave the same in my case.

推荐答案

区别在于引擎盖下使用的装饰器.

The difference is the decorator used under the hood.

对于类似[property] ="的情况，组件ts文件使用 @Input 装饰器实现该属性.

For cases like this [property]="" the component ts file implements that property with the @Input decorator.

对于类似此属性="的情况，组件ts文件使用 @Attribute 装饰器实现该属性.

For cases like this property="" the component ts file implements that property with the @Attribute decorator.

请参见以下示例:

export class MyComponent {

    @Input() public title1: string;
    public title2: string;

    constructor(@Attribute('title2') titleAttr) {
        this.title2 = titleAttr;
    }

}

因此，您可以像这样使用它:

So then, you can use it like:

<my-component [title1]="'testing'" title2="testing2"></my-component>

需要记住的另一件事，是能够决定何时使用哪种类型的值是您要传递的值.输入接受来自组件上下文的变量，而属性仅接受行传递的值.

Another thing to have in mind and be able to decide when to use which one is the type of value you want to pass in. While the input accepts variables coming from your component context, the attribute only accepts values passed in line.

在上面的示例中，请注意，对于输入，我使用单引号在行中传递字符串，但是可能没有引号和现有变量的名称.

这篇关于Angular 4标记中的[property] =和property有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！