在 Angular 中，我们必须使用括号，而我们必须使用括号 [重复]

Posted 2023-02-22

【中文标题】在 Angular 中，我们必须使用括号，而我们必须使用括号 [重复]

【英文标题】：In Angular for which arrtributes we have to use parentheses and for which we have to use bracket [duplicate]

【发布时间】：2017-11-05 08:04:59

【问题描述】：

我对在 Angular 中的属性上使用括号和方括号有点困惑。

<form [formGroup]="vform" (ngSubmit)="onSubmit(vform.value)">
  <input type="text" name="uname" placeholder="User Name" formControlName="uname">
  <input type="text" name="fname" placeholder="Full Name" formControlName="fname">
  <input type="submit" [disabled]="!vform.valid" value="Submit">
</form>

【问题讨论】：

问题是什么

我们必须使用圆括号和方括号，对于 ngSubmit 我们使用圆括号，对于禁用我们使用方括号。所以我对我们使用哪些属性感到困惑？

angular.io/docs/ts/latest/guide/template-syntax.html

文档在这个问题上非常清楚。请阅读。

【参考方案1】：

无论何时您将属性向下传递给组件/元素，您都会使用括号，例如：

假设我将 size="20" 传递给 div 元素

<div size="20"></div> // passing a value , not a VARIABLE 

<div [size]="sizeVariable"></div> // passing a variable to be bound to 

为了给你一个更广阔的视野，想象一下当使用普通的style 标签时，你将一些属性（在这种情况下是颜色和...等样式）传递给元素：

<div style="color:red">

在使用 parantesese 时，您正在订阅来自元素的事件：

<div (click)="doSomething()">

类似于：

<div onClick="doSomething">

有点类似

 $('#yourElement').on('click',doSomething)

【参考方案2】：

[] 用于从值绑定。它允许传递对象。

<div [allowed]="allowed"></div>

() 用于绑定在触发 DOM 事件时调用的事件处理程序

<date-comp [title]="childTitle" (notify)="onNotification($event)"></date-comp>

参考What is the difference between parentheses, brackets and asterisks in Angular2?

【参考方案3】：

使用括号绑定到(click)="clickHandler()"等事件

使用方括号绑定到[disabled]="true"等属性

使用两者（称为盒子中的足球）进行双向绑定，例如[(ngModel)]="attr"

【讨论】：

（点击）查看组件。（单向）[禁用]查看组件查看（单向）[（ngModel）]双向绑定

【参考方案4】：

括号用于函数调用，而括号用于传递或设置属性。有关更多信息，请参阅 angular 文档@www.angular.io