Angular 4 标记中的 [property]= 和 property 有啥区别？

Posted 2023-02-22

【中文标题】Angular 4 标记中的 [property]= 和 property 有啥区别？

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

【发布时间】：2018-05-20 14:58:22

【问题描述】：

所以让我们为 PrimeNG 表添加以下标记

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

selectionMode="multiple" 和 [selection]="multiple" 之间显然存在差异，因为第二个变量不会使表格可选择。有什么区别？？

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

【问题讨论】：

我相信这是在 Angular 2 中作为绑定值属性引入的

***.com/questions/35944749/… 我认为在 angular 4 中是一样的

angular.io/guide/template-syntax#one-time-string-initialization

【参考方案1】：

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

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

对于这种属性=“”的情况，组件 ts 文件使用 @Attribute 装饰器实现该属性。

看这个例子：

export class MyComponent 

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

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

那么，你可以像这样使用它：

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

要记住的另一件事是能够决定何时使用哪一个是您要传入的值的类型。虽然输入接受来自组件上下文的变量，但属性只接受行中传递的值。

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

【参考方案2】：

selectionMode="multiple"

是纯 html 属性，与 Angular 没有任何关系。

[selection]="multiple"

创建从字段（或表达式）multiple 到 属性 selection

的 Angular 绑定

【讨论】：

它与角度无关，但它可以与 Alejandro 解释的组件有关。

不，不能。如果名称与输入匹配，Angular 会读取属性，但您也可以使用纯 JS 读取它，所以我认为这与 Angular 无关。 @Attribute() 装饰器是 Angular 读取属性的指令，但这与 selectionMode="multiple" 不同，后者只是按原样添加到 DOM 中（就像你自己将它写到 index.html 中一样）

我认为你专注于表达的右侧，而我的怀疑是左侧。

我不这么认为。仅当您添加 `constructor(@Attribute('title2') titleAttr) 指示 angular 从宿主元素读取属性时，您的论点才有效。没有那个 Angular 与属性无关。

这就是我的观点 - 在某些情况下，我的论点是有效的，正如您所指出的。这就是亚历杭德罗向我展示的，也是我所指的。我是 Angular 新手，不知道 @Atrribute 的存在。感谢您的努力！