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-*指令，这是不会被正确解析的