Переключить поле ввода с кликабельным значком

У меня есть следующее поле ввода, при нажатии на значок, поле ввода должно быть переключено на другой идентификатор ввода и имя метки. При повторном нажатии он должен снова измениться. В настоящее время я решил эту проблему с помощью 2 отдельных *.html файлы и переключение между ними. Сейчас я ищу более разумное решение. 

 <ion-content>
      <div class="item-input-wrapper">
      <ion-item>
        <ion-label stacked>Your name</ion-label>
        <ion-input id="name" type="text"></ion-input>
        <ion-icon ion-button (click)="changeToStudentNumber()"  name="ios-switch"  clear item-right></ion-icon>
      </ion-item>
      </div>
    </ion-content>

Второй html выглядит так: 

 <ion-content>
      <div class="item-input-wrapper">
      <ion-item>
        <ion-label stacked>Your student number</ion-label>
        <ion-input id="studentnumber" type="text"></ion-input>
        <ion-icon ion-button (click)="changeToName()"  name="ios-switch"  clear item-right></ion-icon>
      </ion-item>
      </div>
    </ion-content>
1 3
ionic-framework ionic2

1 ответ:

Вы пробовали использовать ngIf?

<ion-content>
  <div class="item-input-wrapper">
  <ion-item *ngIf="useName">
    <ion-label stacked>Your name</ion-label>
    <ion-input #nameInput id="name" type="text"></ion-input>
    <ion-icon ion-button (click)="toggleUseName(nameInput)"  name="ios-switch"  clear item-right></ion-icon>
  </ion-item>
  <ion-item *ngIf="!useName">
    <ion-label stacked>Your student number</ion-label>
    <ion-input #numberInput id="studentnumber" type="text"></ion-input>
    <ion-icon ion-button (click)="toggleUseName(numberInput)"  name="ios-switch"  clear item-right></ion-icon>
  </ion-item>     
  </div>
</ion-content>

Затем toggleUseName() может просто перевернуть свойство useName на вашем контроллере следующим образом; 

toggleUserName(inputToFocus) {
    this.useName = !this.useName;
    inputToFocus.setFocus();
}
1