ionic3中關於Ionic ui component使用的一些總結

在個人理解中，IONIC中例如 ion-list ion-item  ion-input 其實就是相於一段自定義的指令 ，相對於angular1.x中的東西，

因此，咱們在使用中，要特別去注意button 與ion-input這些控件的使用

舉例：

<ion-list>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

能夠這樣寫，可是不能在本來的HTML標籤中內嵌ion-*，例如，這種是不容許的：

  <ion-list>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../../assets/imgs/avatar-ben.png">
      </ion-thumbnail>
      <h2>當前電量信息</h2>
      <p>
      <ion-input [value]="batterStatusInfo" readonly="true" />
      <input type="text" [value]="batterStatusInfo" readonly="true" /></p>
      <button ion-button clear item-end (click)="showBatteryStatus()">實時查詢</button>
    </ion-item>
  </ion-list>

注意：不能在本來的HTML標籤中內嵌Ion-*指令，這是不會被正確解析的