Spartacus 产品明细页面 (product detail page) 如下图所示：
其 selector 为 cx-product-images：
在 Spartacus 实现里，有两个 Component 都应用了这个 selector，然而 PDP 页面应用的是前者，即下图图例 1 所示的 ProductImageZoomProductImagesComponent：
这个 Component 里有一个 cx-media, 绑定了一个 click 事件处理，点击后能够放大：
在 Angular 中，组件选择器 (selector) 的绑定语法有时应用方括号([])，有时应用圆括号(())。这些符号在语法上有着不同的含意和用处。让咱们深入探讨一下它们的区别。
-
方括号 ([]):
方括号在组件选择器中用于属性绑定。它容许将组件的属性绑定到父组件的属性或表达式上。当方括号用于组件选择器时，它会将组件的属性视为输出属性，并将其与父组件中的属性进行绑定。例如，假如咱们有一个组件选择器为
<app-custom-component [property]="value"></app-custom-component>，其中[property]示意将父组件的value属性绑定到子组件的property属性上。应用方括号绑定属性时，父组件的属性变动会影响子组件的属性。当父组件的属性发生变化时，子组件会相应地更新。这使得数据从父组件流向子组件，实现了单向数据流的概念。
此外，方括号还能够用于属性绑定的简写模式。例如，
<app-custom-component [property]="value"></app-custom-component>能够简写为<app-custom-component [property]="value"></app-custom-component>。 -
圆括号(()):
圆括号在组件选择器中用于事件绑定。它容许将组件的事件绑定到父组件中的办法或表达式上。当圆括号用于组件选择器时，它会将组件的事件视为输入事件，并将其与父组件中的办法进行绑定。
例如，假如咱们有一个组件选择器为
<app-custom-component (event)="handleEvent($event)"></app-custom-component>，其中(event)示意将子组件中的event事件绑定到父组件的handleEvent办法上。当子组件触发了事件时，父组件中的办法将被调用。这使得数据从子组件流向父组件，实现了组件之间的通信。
相似于方括号的简写模式，圆括号也有一个简写模式。例如，
(event)="handleEvent($event)"能够简写为onEvent="handleEvent($event)"。这种简写模式更罕用于 DOM 事件的绑定。 - 方括号和圆括号的联合应用：
在某些状况下，咱们可能须要同时应用方括号和圆括号来实现双向数据绑定。双向数据绑定容许父组件和子组件之间的属性和事件的双向传递。