Angular切换复选框组件传值与默认值设置咨询

问题描述 #

我有一个带有两个标签的toggle组件，要在另一个组件中使用。想知道当toggle从A切换到B时，向调用组件传递值的最佳Angular方式是什么？同时需要为toggle设置默认值（例如示例中的ABC），该怎么操作？

解决方案 #

一、向父组件传递值的最佳方式 #

Angular中最规范的做法是通过@Output()结合EventEmitter实现组件间事件通信，这完全符合Angular组件设计原则，能清晰地将子组件的状态变化通知给父组件。

二、设置默认值 #

通过@Input()接收父组件传入的默认值，在组件初始化阶段同步checkbox的选中状态与默认值，确保组件渲染时就处于正确的初始状态。

修改后的组件代码 #

1. Toggle组件TS文件

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-toggle',
  templateUrl: './custom-toggle.component.html',
  styleUrls: ['./custom-toggle.component.css']
})
export class CustomToggleComponent implements OnInit {
  // 接收父组件传入的默认选中值，默认值设为ABC
  @Input() selectedValue: string = 'ABC';
  // 定义输出事件，向父组件传递选中值的变化
  @Output() valueChanged = new EventEmitter<string>();

  // 映射toggle标签与对应的值，可根据需求自定义
  private optionMap = {
    left: 'ABC',
    right: 'DEF'
  };

  ngOnInit(): void {
    // 初始化checkbox状态：如果默认值是DEF，则选中checkbox
    const checkbox = document.getElementById('toggle') as HTMLInputElement;
    checkbox.checked = this.selectedValue === this.optionMap.right;
  }

  // 处理toggle切换事件
  onToggleChange(event: Event): void {
    const isChecked = (event.target as HTMLInputElement).checked;
    // 根据选中状态获取对应的值
    this.selectedValue = isChecked ? this.optionMap.right : this.optionMap.left;
    // 向父组件发射新的选中值
    this.valueChanged.emit(this.selectedValue);
  }
}

2. Toggle组件HTML模板

<input type="checkbox" class="td-wb-checkbox__input checkBox"
       id="toggle" (change)="onToggleChange($event)" />
<label for="toggle" class='buttonWarpper'>
  <div>left</div>
  <div>right</div>
</label>

3. Toggle组件CSS（保留原样式）

.buttonWarpper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content;
  border: 3px solid #f02d1f;
  border-radius: 20px;
  background: #f02d1f;
  color: #f02d1f;
  cursor: pointer;
}

.buttonWarpper::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  border-radius: 20px;
  background: white;
  transition: all 0.3s;
}

.checkBox:checked+.buttonWarpper::before {
  left: 50%;
}

.buttonWarpper div {
  padding: 10px;
  text-align: center;
  z-index: 1;
}

.checkBox {
  display: none;
}

.checkBox:checked+.buttonWarpper div:first-child {
  color: white;
  transition: color 0.5s;
}

.checkBox:checked+.buttonWarpper div:last-child {
  color: #f02d1f;
  transition: color 0.5s;
}

.checkBox+.buttonWarpper div:first-child {
  color: #f02d1f;
  transition: color 0.3s;
}

.checkBox+.buttonWarpper div:last-child {
  color: white;
  transition: color 0.5s;
}

父组件中使用Toggle组件 #

在父组件模板中引入toggle组件，传入默认值并监听值变化事件：

<app-custom-toggle [selectedValue]="'ABC'" (valueChanged)="handleToggleChange($event)"></app-custom-toggle>

父组件TS中处理值变化的逻辑：

handleToggleChange(value: string): void {
  console.log('Toggle当前选中值:', value);
  // 这里添加值变化后的业务逻辑
}

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