Spartacus 產品明細頁面(product detail page)如下圖所示：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/de4af5c252f04f149d3e81642586a917.png#pic_center)

其 selector 為 `cx-product-images`：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/5f0334ca25084cdcb7354c3e55a355d6.png#pic_center)

在 Spartacus 實現裡，有兩個 Component 都使用了這個 selector，但是 PDP 頁面使用的是前者，即下圖圖例1 所示的 `ProductImageZoomProductImagesComponent`：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/88be350759cc4467b13afa874e63d922.png#pic_center)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/39a56d6a5176450a8473e813a9285424.png#pic_center)

這個 Component 裡有一個 `cx-media`, 繫結了一個 click 事件處理，點選後可以放大：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/614f6777c4a44f98944c9583d0152b7c.png#pic_center)

在 Angular 中，元件選擇器(selector)的繫結語法有時使用方括號([])，有時使用圓括號(())。這些符號在語法上有著不同的含義和用途。讓我們深入探討一下它們的區別。

1. 方括號([]):
   方括號在元件選擇器中用於屬性繫結。它允許將元件的屬性繫結到父元件的屬性或表示式上。當方括號用於元件選擇器時，它會將元件的屬性視為輸入屬性，並將其與父元件中的屬性進行繫結。

例如，假設我們有一個元件選擇器為`<app-custom-component></app-custom-component>`，其中`[property]`表示將父元件的`value`屬性繫結到子元件的`property`屬性上。

使用方括號繫結屬性時，父元件的屬性變化會影響子元件的屬性。當父元件的屬性發生變化時，子元件會相應地更新。這使得資料從父元件流向子元件，實現了單向資料流的概念。

此外，方括號還可以用於屬性繫結的簡寫形式。例如，`<app-custom-component></app-custom-component>`可以簡寫為`<app-custom-component></app-custom-component>`。

2. 圓括號(()):

圓括號在元件選擇器中用於事件繫結。它允許將元件的事件繫結到父元件中的方法或表示式上。當圓括號用於元件選擇器時，它會將元件的事件視為輸出事件，並將其與父元件中的方法進行繫結。

例如，假設我們有一個元件選擇器為`<app-custom-component></app-custom-component>`，其中`(event)`表示將子元件中的`event`事件繫結到父元件的`handleEvent`方法上。

當子元件觸發了事件時，父元件中的方法將被呼叫。這使得資料從子元件流向父元件，實現了元件之間的通訊。

類似於方括號的簡寫形式，圓括號也有一個簡寫形式。例如，`(event)="handleEvent($event)"`可以簡寫為`onEvent="handleEvent($event)"`。這種簡寫形式更常用於DOM事件的繫結。

3. 方括號和圓括號的結合使用：
   在某些情況下，我們可能需要同時使用方括號和圓括號來實現雙向資料繫結。雙向資料繫結允許父元件和子元件之間的屬性和事件的雙向傳遞。

Spartacus product 明細頁面的產品圖片顯示

相關文章