ionic 实用技巧

启动多个 app

• 默认启动 app 的命令：ionic serve
• 如果已经启动一个 app ，执行上述命令无法同时启动第二个 app

• 配置 “--dev-logger-port” 参数，默认值是：53703。启动第二个 app 的命令：

  ionic serve --dev-logger-port 53704

登录页显示/隐藏密码

• 关键点：修改 ion-input 的 type 属性
• HTML

    <ion-item class="input-item">
        <ion-label class="label">密&emsp;码</ion-label>
        
        <!-- 根据 passwordHide 开关修改 ion-input 的 type 属性 -->
        <!-- 注意设置  clearOnEdit="false"。避免改变 type 值，input 会自动清空的情况 -->
        <ion-input [type]="passwordHide?'password':'text'" (ionFocus)="disabledScroll()" formControlName="password" clearInput="true" clearOnEdit="false"></ion-input>
        
        <!-- 修改图标 -->
        <img [src]="passwordHide?'./assets/icon/pHide.png':'./assets/icon/pShow.png'" item-right class="password-operate" (click)="operatePassword()">
    </ion-item>
复制代码

• typescript

// 定义控制开关
passwordHide: boolean = true;

// 修改开关 passwordHide 的值
operatePassword() {
    this.passwordHide = !this.passwordHide;
}
复制代码

• 效果