Angular 8带内部内容的多选自定义复选框实现求助

我来帮你实现这个Angular 8的自定义多选组件，刚好能满足你要的选中深橙色、未选中浅橙色且支持自定义内部内容的需求！我们会把它做成可复用的Angular组件，方便你在项目中多处使用。

第一步：创建自定义多选组件 #

首先生成一个名为custom-checkbox的组件（可以用Angular CLI命令：ng generate component custom-checkbox），然后替换以下代码：

custom-checkbox.component.ts

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

@Component({
  selector: 'app-custom-checkbox',
  templateUrl: './custom-checkbox.component.html',
  styleUrls: ['./custom-checkbox.component.css']
})
export class CustomCheckboxComponent {
  // 外部传入的选中状态
  @Input() checked = false;
  // 外部传入的组件内部内容
  @Input() label = '';
  // 选中状态变化时的输出事件，用于双向绑定
  @Output() checkedChange = new EventEmitter<boolean>();

  // 切换选中状态
  toggleCheckbox() {
    this.checked = !this.checked;
    this.checkedChange.emit(this.checked);
  }
}

custom-checkbox.component.html

<div class="custom-checkbox-container" (click)="toggleCheckbox()">
  <!-- 隐藏原生checkbox -->
  <input type="checkbox" [checked]="checked" hidden>
  <!-- 自定义选中框 -->
  <span class="checkbox-box" [class.checked]="checked">
    <!-- 勾选标记 -->
    <span class="check-mark" *ngIf="checked"></span>
  </span>
  <!-- 自定义内部内容 -->
  <span class="checkbox-label">{{ label }}</span>
</div>

custom-checkbox.component.css

.custom-checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 15px;
}

/* 未选中状态：浅橙色背景 */
.checkbox-box {
  width: 24px;
  height: 24px;
  border-radius: 4px; /* 你也可以改成圆角如30px，按需求调整 */
  background-color: #ffb74d; /* 浅橙色 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  transition: background-color 0.2s ease;
}

/* 选中状态：深橙色背景 */
.checkbox-box.checked {
  background-color: #f57c00; /* 深橙色 */
}

/* 勾选标记样式 */
.check-mark {
  width: 8px;
  height: 16px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  font-size: 14px;
  user-select: none;
}

第二步：在父组件中使用这个自定义组件 #

比如在你的页面组件里这样用：

<div class="row">
  <app-custom-checkbox [(checked)]="htmlChecked" label="HTML"></app-custom-checkbox>
  <app-custom-checkbox [(checked)]="cssChecked" label="CSS"></app-custom-checkbox>
  <app-custom-checkbox [(checked)]="jsChecked" label="JavaScript"></app-custom-checkbox>
</div>

对应的父组件TS里定义变量：

htmlChecked = false;
cssChecked = false;
jsChecked = false;

关键说明 #

• 双向绑定：通过[(checked)]可以像原生checkbox一样轻松绑定组件的选中状态，方便你获取和修改选择结果
• 自定义内容：通过label输入属性可以传入任意文本内容，如果你需要更复杂的HTML内容，也可以改成<ng-content>插槽实现
• 样式调整：你可以修改.checkbox-box的border-radius改成圆形，或者调整颜色值来匹配你的设计规范
• 交互反馈：添加了transition动画，切换状态时背景色变化更平滑

这样实现的组件完全符合你的需求：未选中是浅橙色，选中是深橙色，内部可以自定义内容，而且是Angular 8中标准的可复用组件写法~

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