當用戶單擊 ion-item 中的任何項目時打開新頁面

Question

這是codepen

1）我想打開新的詳細信息頁面，當用戶點擊項目並希望在新打開的背面顯示該點擊項目的詳細信息。
2）在詳細信息頁面上，如果用戶單擊該按鈕，將返回“確定”按鈕，然后它將返回列表頁面。
3）如何在列表項的右側顯示標記的圓圈圖標。

我怎樣才能做到這一點？ 我花了 2 個小時，但沒有找到任何有效的解決方案。

請幫我。 我是 ionic 和 angular js 的新手。

Answer 1

在您的CSS中添加以下內容：

ion-list div ion-item i {
  float: right;
  position: relative;
}

您可能需要添加以下行：

top: -20px;

調整位置。

Answer 2

您應該閱讀有關狀態的信息 ，然后為列表的每個元素創建一個，並為列表本身創建一個。 之后，您所需要的就是調用$state.go('nameOfState'); 不確定是否有辦法僅靠離子本身來做到這一點...

Answer 3

這是一個解決方法； 問題 1) 向每個離子項添加一個 onclick 事件，該事件鏈接到處理事件的方法。 回調將處理路由到詳細信息頁面，同時將列表頁面 URL 作為 prop 或作為路由查詢參數附加

問題 3) Ionic 5 + 已經准備好了。 您可以簡單地將 slot 屬性用於 ion-item 中的 position 項目這是一個涵蓋以上所有內容的示例代碼

          <h4> {{ product.name }} ({{ product.sku }})</h4>

          <ion-row>
            <ion-col class="separator" size-md="4" size-xs="12">

              <small>Selling Price: {{ product.selling_price }}</small>
            </ion-col>
            <ion-col class="separator" size-md="4" size-xs="12">

              <small> Cost Price: {{ product.cost_price }} </small>

            </ion-col>

          </ion-row>
        </ion-label>
        <ion-buttons>
          <ion-button fill="clear" slot="end" @click="editProduct(product._id)">
            <ion-icon :icon="createOutline" slot="icon-only"></ion-icon>
          </ion-button>
          <ion-button fill="clear" slot="end" @click="deleteProduct(product._id)">
            <ion-icon :icon="trashOutline" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-buttons>

      </ion-item>