跳至主要內容
版本：v8

從 Ionic 6 更新至 7

注意

本指南假設您已經將您的應用程式更新至 Ionic 6 的最新版本。在開始本指南之前，請確保您已遵循升級至 Ionic 6 指南。

重大變更

如需從 Ionic 6 到 Ionic 7 的完整重大變更列表，請參閱 Ionic Framework 儲存庫中的重大變更文件。

開始使用​

Angular​

  1. Ionic 7 支援 Angular 14 以上版本。請遵循Angular 更新指南，更新至最新版本的 Angular。
  2. 如果您的專案正在使用 rxjs，Ionic 7 要求最低 rxjs 版本為 7.5.0
npm install rxjs@7.5.0
  1. 更新至 Ionic 7 的最新版本
npm install @ionic/angular@7

如果您正在使用 Ionic Angular Server 和 Ionic Angular Toolkit，請務必同時更新它們

npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9

注意：@ionic/angular-toolkit@9 要求最低 Angular 版本為 15。如果您仍然使用 Angular 14，則可以略過更新至 @ionic/angular-toolkit@9。

React​

  1. Ionic 7 支援 React 17 以上版本。更新至最新版本的 React
npm install react@latest react-dom@latest
  1. 更新至 Ionic 7 的最新版本
npm install @ionic/react@7 @ionic/react-router@7

Vue​

  1. Ionic 7 支援 Vue 3.0.6 以上版本。更新至最新版本的 Vue
npm install vue@latest vue-router@latest
  1. 更新至 Ionic 7 的最新版本
npm install @ionic/vue@7 @ionic/vue-router@7

核心​

  1. 更新至 Ionic 7 的最新版本
npm install @ionic/core@7

更新您的程式碼​

瀏覽器支援​

Ionic 支援的瀏覽器列表已變更。請檢閱瀏覽器支援指南，以確保您將應用程式部署到受支援的瀏覽器。

如果您有 browserslist 或 .browserslistrc 檔案，請使用以下內容更新它

Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14

類型​

  1. 已移除 ActionSheetAttributes、AlertAttributes、AlertTextareaAttributes、AlertInputAttributes、LoadingAttributes、ModalAttributes、PickerAttributes、PopoverAttributes 和 ToastAttributes。開發人員應改用 { [key: string]: any }。

核取方塊​

  1. 將任何 --background 和 --background-checked CSS 變數的使用方式重新命名為 --checkbox-background 和 --checkbox-background-checked。

日期時間​

  1. 移除任何將 value 屬性設定為空字串 ('') 的程式碼。
  2. 移除任何存取 value 屬性上時區資訊的程式碼。日期時間不管理時區，因此提供的任何時區資訊都會被忽略。

輸入​

  1. 將任何存取 ionInput 事件的 detail 酬載的程式碼從 event.detail 更新為 event.detail.value，因為 detail 酬載現在是一個包含值和事件的物件。
  1. 移除任何 swipeToClose 屬性的使用方式。卡片模態視窗預設為可滑動，因此如果您希望您的卡片模態視窗保持可滑動，您可以移除 swipeToClose。如果您想要防止模態視窗關閉，請使用 canDismiss 屬性。
  2. 移除任何將 canDismiss 屬性設定為 undefined 的程式碼。canDismiss 屬性現在預設為 true，因此不再需要此程式碼。

選擇器​

  1. 移除任何在 ion-picker-column 上存取 refresh 的程式碼。開發人員應改用 ion-picker 上的 columns 屬性來重新整理檢視。
  1. 將任何存取 ionInput 事件的 detail 酬載的程式碼從 event.detail 更新為 event.detail.value，因為 detail 酬載現在是一個包含值和事件的物件。

分段​

  1. 移除任何將 value 屬性設定為 null 的程式碼。開發人員應改用 '' 或 undefined。

幻燈片​

  1. 移除 ion-slides、ion-slide 和任何相關類型。這些元件已被移除，改為直接使用 Swiper.js。以下指南包含有關此遷移的更多資訊

Angular 遷移指南
React 遷移指南
Vue 遷移指南

文字區域​

  1. 將任何存取 ionInput 事件的 detail 酬載的程式碼從 event.detail 更新為 event.detail.value，因為 detail 酬載現在是一個包含值和事件的物件。

切換​

  1. 將任何 --background 和 --background-checked CSS 變數的使用方式重新命名為 --track-background 和 --track-background-checked。

虛擬滾動​

  1. 移除 ion-virtual-scroll 和任何相關類型。此元件已被移除，改為使用 JavaScript Frameworks 提供的虛擬滾動解決方案。以下指南包含有關此遷移的更多資訊

Angular 遷移指南
React 遷移指南
Vue 遷移指南

需要升級協助嗎？​

請務必查看Ionic 7 重大變更指南。預設屬性和 CSS 變數值進行了多項變更，開發人員可能需要注意。此頁面僅列出需要使用者操作的重大變更。

如果您在升級時需要協助，請在 Ionic 論壇 發文尋求幫助。

目錄

編輯此頁面