如何通过IonToggle切换Textarea行数并添加文本框？

没问题，这个需求完全可以实现！我会基于你提供的现有代码，帮你调整出符合预期的交互效果。

核心思路 #

通过一个布尔变量记录IonToggle的勾选状态，动态控制两个关键视图变化：

• 主Textarea的rows属性（未勾选时显示8行，勾选时显示7行）
• 额外文本框的显示/隐藏

步骤1：组件TS文件添加状态变量与逻辑 #

在你的组件类中定义控制状态的变量，并处理toggle的切换事件：

import { Component } from '@angular/core';

@Component({
  // 保留你原有的组件元数据
})
export class YourComponent {
  isToggleChecked = false; // 初始状态：未勾选
  message: string = '';
  mode = 1; // 假设你已定义该变量

  // 处理toggle切换事件
  AddChild(isChecked: boolean) {
    this.isToggleChecked = isChecked;
    // 这里可以保留你原有AddChild方法的其他业务逻辑（如果有的话）
  }

  updateV(event: string) {
    // 保留你原有的updateV逻辑
  }
}

步骤2：修改HTML模板 #

调整主Textarea的行数绑定，并添加额外文本框的显示控制：

<!-- 主文本框：根据toggle状态动态切换行数 -->
<textarea *ngIf="mode === 1" 
          id="message" 
          [rows]="isToggleChecked ? 7 : 8" 
          (ngModelChange)="updateV($event)" 
          [(ngModel)]="message" 
          placeholder="MessageFinal">
</textarea>

<!-- 勾选后显示的额外文本框 -->
<textarea *ngIf="mode === 1 && isToggleChecked" 
          id="extra-input" 
          rows="1" 
          placeholder="请输入额外内容">
</textarea>

<!-- 切换组件：绑定状态变量实现双向同步 -->
<ion-toggle class="toggle-small" 
            toggle-class="toggle-calm" 
            (ionChange)="AddChild($event.target.checked)" 
            [(ngModel)]="isToggleChecked">
</ion-toggle>

关键细节说明 #

• 动态行数绑定：使用[rows]="isToggleChecked ? 7 : 8"实现属性的动态赋值，根据toggle状态实时调整文本框行数。
• 额外文本框控制：通过*ngIf="mode === 1 && isToggleChecked"确保只有在主文本框显示且toggle勾选时，额外文本框才会渲染。
• 状态双向同步：IonToggle通过[(ngModel)]="isToggleChecked"实现状态的双向绑定，无需手动维护视图与变量的一致性。

这样就能完美实现你想要的交互效果啦！

内容的提问来源于stack exchange，提问作者Taieb