如何在Ionic切换开关勾选时添加元素、取消时移除？

Absolutely, this is totally doable! The trick is to track the toggle's state and modify the textarea's value accordingly, while also preserving the cursor position for a smooth user experience. Here's a complete solution tailored to your Ionic setup:

Step 1: Update Your Template (exemple.html) #

First, we'll bind the toggle's state to a component variable and add a template reference for easier access to the textarea:

<ion-toggle 
  class="toggle-small" 
  toggle-class="toggle-calm" 
  (ionChange)="handleToggleChange()"
  [(ngModel)]="isAirplaneModeEnabled"
> Airplane Mode </ion-toggle>

<textarea 
  id="msg" 
  #messageTextarea 
  placeholder="Type your message here..."
></textarea>

Step 2: Implement the Logic (exemple.ts) #

We'll use Angular's ViewChild to safely access the textarea, then handle adding/removing your element based on the toggle's state:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './exemple.html',
  styleUrls: ['./exemple.scss'],
})
export class ExempleComponent {
  isAirplaneModeEnabled = false;
  @ViewChild('messageTextarea') messageTextarea!: ElementRef<HTMLTextAreaElement>;
  // Define the element you want to add/remove (customize this to your needs)
  private readonly AIRPLANE_ELEMENT = '[Airplane Mode]';

  handleToggleChange() {
    const textarea = this.messageTextarea.nativeElement;
    const currentValue = textarea.value;
    const cursorStart = textarea.selectionStart;
    const cursorEnd = textarea.selectionEnd;

    if (this.isAirplaneModeEnabled) {
      // Insert the element at the current cursor position
      const updatedValue = 
        currentValue.substring(0, cursorStart) + 
        this.AIRPLANE_ELEMENT + 
        currentValue.substring(cursorEnd);
      
      textarea.value = updatedValue;
      // Move cursor to just after the inserted element
      textarea.selectionStart = textarea.selectionEnd = cursorStart + this.AIRPLANE_ELEMENT.length;
    } else {
      // Remove all occurrences of the element (remove 'g' flag to only remove first instance)
      const updatedValue = currentValue.replace(new RegExp(this.AIRPLANE_ELEMENT, 'g'), '');
      textarea.value = updatedValue;
      // Adjust cursor position to a valid spot after removal
      const adjustedCursor = Math.min(cursorStart, currentValue.indexOf(this.AIRPLANE_ELEMENT));
      textarea.selectionStart = textarea.selectionEnd = adjustedCursor;
    }
  }
}

Key Notes: #

• Toggle State Sync: [(ngModel)] keeps our component variable isAirplaneModeEnabled in perfect sync with the toggle's checked state, so we always know whether to add or remove the element.
• DOM Access: Using @ViewChild is the recommended Angular/Ionic approach (instead of document.getElementById) because it works seamlessly with Angular's change detection and is more maintainable.
• Cursor Preservation: We make sure the cursor stays in a logical position after adding/removing the element, which makes the experience feel polished for users.
• Customization: Replace [Airplane Mode] with whatever element/text you want to insert into the textarea.

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