实际上，[]它() 是属性中有效的HTML字符。如果在服务器端生成HTML代码或使用无法处理这些字符的任何其他预处理器，则始终可以使用等效的规范语法。

• []bind-*因此，是一种简写[propertyName] == bind-property-name
• ()on-*因此，是一种简写(eventName) == on-event-name

使用此语法主要是因为两个原因（实际上是强制性的）：

• 转义 - 需要转义元素属性。如果你有一个src像这样的动态图像标签：<img src="{{imageSource}}">这会导致404错误，因为浏览器会立即尝试请求给定的URL。该特定时刻的URL {{imageSource}}肯定没有有效的URL。因此我们ngSrc在Angular 1中有属性。我们可以像使用它一样<img ng-src="{{imageSource}}">。它的作用是，它等待插值被评估，然后src为图像添加属性。这确保了由于异步插值评估而没有产生错误请求。还有一些指令可以帮助解决这个问题ng-href。现在，当谈到Web组件时，属性名称不再是确定性的。Web组件可以定义框架不了解的自己的属性。所以我们有两个选择：我们要么为需要转义的每个属性创建一个指令（哦，不！），或者我们想出一个Angular理解的更通用的语法，并让框架相应地拦截。这就是为什么[propertyName]被引入的原因。同样，这只是一个捷径。如果不适合您，请使用规范语法。
• 属性绑定 - 现在你可能想知道为什么[propertyName]而不是[attributeName]。事实证明，在处理不了解Angular指令生命周期的自定义元素时，我们遇到了另一个问题。在Angular中，我们可以决定一个值如何绑定到元素的范围。所以在这段代码中：<my-directive foo="bar">，bar可以是字符串，也可以是双向数据绑定的对象。我们只知道通过查看指令的实现。但是，Web组件和自定义元素根本不了解Angular的生命周期。这意味着，属性值总是一个字符串，因为这就是HTML中的属性。为了确保我们仍然可以将除了字符串之外的其他值传递给任何元素，Angular 2将绑定到元素属性而不是属性。因为DOM元素对象上的属性可以是任何东西，而不仅仅是字符串。因此，使用[]语法，我们也告诉Angular我们确实希望绑定到元素的属性，而不是它的属性。这也意味着现在指令/元素/ web组件的使用者负责决定如何将值传递给它。

我写了一篇关于它的文章，涵盖了这个主题，也有来自ngeurope的讨论。

我希望这能解决问题！

让我尝试一个能够清除你想法的例子。

考虑一下代码：

get test() {
    return true;
}

如果使用以下代码，则“[visible]”属性将“test”作为值接收。

<input tybe="button" [visible]="test" /> 

但是如果你使用：

<input type="button" (visible)="test"

它接收“test”方法的值。

如果我做错了，请有人纠正我。