什么是離子成分？
Ionic 組件在很大程度上是讓您的混合應用程序變得栩栩如生的因素。 組件為您的應用程序提供用戶界面，Ionic 捆綁了超過 28 個組件。這些將幫助您為您的應用程序創造令人驚嘆的第一印象。
當然，您無法在單個應用程序中使用所有這 28 個組件。如何決定使用哪些？
幸運的是，您幾乎可以在每個應用程序中找到一些組件。在里面 在上一篇文章中，我向您展示了如何使用 Ionic 組件按鈕導航到另一個視圖。創建此按鈕所需的只是以下代碼：
<button ion-button>Navigate to Info</button>
在這里，我們已經使用了可用的 Ionic 組件之一。這就是 Ionic 的美妙之處：我們不必關心按鈕如何使用 組件構建完成后，我們需要知道的是如何正確使用相關組件。
何時使用離子組件？
作為初學者，我懷疑您開發的應用程序是否會不使用 Ionic 組件。您也可以開發自己的自定義組件，但這是另一天關于 Ionic 和 Angular 高級使用的主題。
說了這么多，我們來看看如何使用 Ionic mobile 中最常用的組件 應用：
幻燈片組件
幻燈片組件通常用作應用的介紹，下面是其常見用法的圖片：
列表組件
列表是您在 Ionic 應用程序中經常使用的組件之一。請看下面的屏幕截圖示例。
向您的項目添加組件
現在我們已經收集了有關 Ionic 組件的一些信息，讓我們嘗試將其中一些“構建塊”組合在一起。讓我們繼續向我們的 Ionic 項目添加一些組件。
我們將使用在上一教程中創建的項目，并且由于主頁?是我們應用的入口點，因此我們將向主頁添加幻燈片。 html 文件來添加我們的幻燈片。為此，我們將導航到 src/pages/home 中的 home.html 文件并對文件進行以下更改：
<ion-header><ion-navbar><ion-title>Welcome</ion-title></ion-navbar></ion-header><ion-content><!-- Start Ionic Slides Component --><ion-slides pager><ion-slide style="background-color: green"><h2>Welcome to Hello World</h2> <p>Do some reading here and swipe left</p> </ion-slide><ion-slide style="background-color: blue"><h2>Ionic World</h2> <p>Some more reading here and swipe left</p> <p>Swiping right works too :)</p> </ion-slide><ion-slide style="background-color: red"><h2>Finish</h2> <p>You can't swipe all day. See more of my app</p> <button ion-button>Show me more!</button> </ion-slide></ion-slides><!-- End Ionic Slides Component --></ion-content>
正如您在上面看到的，我們使用幻燈片組件添加了三張幻燈片。這是在
我們將使用另一個 Ionic 組件：列表組件。為此，我們繼續生成一個標題為我的列表的新頁面。您應該記住如何使用以下命令從上一教程中生成新頁面：ionic 生成頁面 my-list。
將新創建的頁面添加到應用程序后，讓我們繼續導航到 my-list.html 并編輯文件，如下所示：
<ion-header><ion-navbar><ion-title>My List</ion-title></ion-navbar></ion-header><ion-content><!-- Start Ionic List Component --><ion-list><ion-item>1</ion-item><ion-item>2</ion-item><ion-item>3</ion-item></ion-list><!-- End Ionic List Component --></ion-content>
將上述代碼添加到您的應用后，您應該能夠看到包含三個項目的列表。現在很好，但我確信您希望在滾動列表時看到一些帶有加速和減速的平滑滾動，對吧？嗯，這很容易實現——我們只需要一個更大的列表！
考慮 my-list.html 文件中的以下代碼：
<ion-header><ion-navbar><ion-title>My List</ion-title></ion-navbar></ion-header><ion-content><!-- Start Ionic List Component --><ion-list><ion-item>1</ion-item><ion-item>2</ion-item><ion-item>3</ion-item><ion-item>4</ion-item><ion-item>5</ion-item><ion-item>6</ion-item><ion-item>7</ion-item><ion-item>8</ion-item><ion-item>9</ion-item><ion-item>10</ion-item><ion-item>11</ion-item><ion-item>12</ion-item><ion-item>13</ion-item><ion-item>14</ion-item><ion-item>15</ion-item><ion-item>16</ion-item><ion-item>17</ion-item><ion-item>18</ion-item><ion-item>19</ion-item><ion-item>20</ion-item></ion-list><!-- End Ionic List Component --></ion-content>
如果您使用上面較長的列表更新文件，您將看到滾動的加速和減速。
現在，這是在我們的項目中創建列表的一種方法，但如果我們需要創建包含更多項目的列表，這看起來會很煩人。這意味著為每一個都編寫
官方 Ionic 文檔展示了如何使用不同的方法用項目填充列表：
<ion-header><ion-navbar><ion-title>My List</ion-title></ion-navbar></ion-header><ion-content><!-- Start Ionic List Component --><ion-list><button ion-item item of items> {{ item }} </button> </ion-list><!-- End Ionic List Component --></ion-content>
上面代碼的神奇之處在于使用了 Angular 指令：*ngFor。我們不會更深入地探討該指令的含義及其用途，但簡而言之，它會迭代數據集合，使我們能夠在應用中構建數據呈現列表和表格。 items 是一個包含我們的數據的變量，并且 item 填充有該列表中的每個項目。如果您想了解有關該指令的更多信息，請查看 Angular 官方文檔。
有了這些知識，我們就可以使用 *ngFor 指令來改進我們的項目。編輯 my-list.html 文件以反映以下內容：
<ion-header><ion-navbar><ion-title>My List</ion-title></ion-navbar></ion-header><ion-content><!-- Start Ionic List Component --><ion-list><ion-item item of items><ion-avatar item-start> @@##@@ </ion-avatar><h2>{{item.title}}</h2> <p>{{item.subTitle}}</p> </ion-item></ion-list><!-- End Ionic List Component --></ion-content>
這里發生了很多事情。
) 和一個段落標簽 (
)。
因此，基本上，您還可以在列表組件內添加其他組件。看看 Ionic 文檔中的卡片列表示例中如何實現此目的的另一個很好的示例。同樣，在該示例中實現 *ngFor 將會帶來好處。
現在，回到我們的代碼，items 中的 item 包含 title、subTitle 和 >圖像。讓我們繼續在 my-list.ts 文件中進行以下更改：
export class MyListPage { items: any; constructor(public navCtrl: NavController, public navParams: NavParams) { this.items = [ { title: 'Item 1', subTitle: 'Sub title 1', image: 'https://placehold.it/50' }, { title: 'Item 2', subTitle: 'Sub title 2', image: 'http://placehold.it/50' }, { title: 'Item 3', subTitle: 'Sub title 3', image: 'http://placehold.it/50' }, { title: 'Item 4', subTitle: 'Sub title 4', image: 'http://placehold.it/50' }, { title: 'item 5', subTitle: 'Sub title 5', image: 'http://placehold.it/50' }, title: 'item 6', subTitle: 'Sub title 6', image: 'http://placehold.it/50' }, title: 'item 7', subTitle: 'Sub title 7', image: 'http://placehold.it/50' }, title: 'item 8', subTitle: 'Sub title 8', image: 'http://placehold.it/50' }, title: 'item 9', subTitle: 'Sub title 9', image: 'http://placehold.it/50' }, title: 'item 10', subTitle: 'Sub title 10', image: 'http://placehold.it/50' }] }
在上面的示例中，我們正在構造函數文件 my-list.ts 中填充項目。這些將顯示在我們的頁面模板（my-list.html 文件）中。該數據可以來自任何來源：本地數據庫、用戶輸入或外部 REST API。但為了這個例子，我們只是對數據進行硬編碼。
結論
雖然我們沒有涵蓋所有 Ionic 組件，但相同的原則也適用于其他組件。我想鼓勵您嘗試并測試其余組件并開始熟悉它們的使用。正如我在開頭提到的，這些組件將成為您將構建的每個 Ionic 應用程序的構建塊！
同時，請查看我們關于 Ionic 應用程序開發的其他一些帖子。
