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

 

转载于:https://www.cnblogs.com/freewsf/p/10235285.html