Angular：页面加载时根据ID与Cookie值勾选指定复选框

1. 修正复选框的ngModel绑定 #

你当前模板中[(ngModel)]绑定的是全局isChecked变量，会导致所有复选框状态联动。需要改为绑定每个节点自身的isChecked属性，确保每个复选框状态独立：

<mat-checkbox 
  *ngIf="isXXMode" 
  [(ngModel)]="node.isChecked" 
  class="xxCheckStyle" 
  #xxCheck  
  color="primary" 
  (change)="doFunction($event)" 
  [value]="node.Id" 
  [id]="node.Id"
>
  {{node.Id}}
</mat-checkbox>

这里把插值{{}}改为Angular推荐的属性绑定[]，更安全且符合框架规范。

2. 实现Cookie读取方法 #

在组件中添加读取指定Cookie的工具函数：

getCookie(name: string): string | null {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) {
    return parts.pop()?.split(';').shift() || null;
  }
  return null;
}

3. 组件初始化时设置勾选状态 #

在组件的ngOnInit钩子中，先加载节点数据，再检查Cookie值并设置对应节点的勾选状态：

import { Component, OnInit } from '@angular/core';
import { xxxxxNode } from './path-to-node-class'; // 替换为你的Node类实际路径

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  isXXMode: boolean = true; // 根据业务逻辑设置该值
  nodes: xxxxxNode[] = [];

  ngOnInit(): void {
    // 初始化节点数据（示例，实际可能从接口获取）
    this.initNodes();

    // 读取Cookie X的值
    const cookieX = this.getCookie('X');
    if (cookieX === '1') {
      // 找到ID为'1'的节点并设置勾选状态
      const targetNode = this.nodes.find(node => node.Id === '1');
      if (targetNode) {
        targetNode.isChecked = true;
      }
    }
  }

  private initNodes(): void {
    // 示例节点数据
    this.nodes = [
      new xxxxxNode('1', '节点1', '类型A'),
      new xxxxxNode('2', '节点2', '类型B'),
      // 更多节点...
    ];
  }

  doFunction(event: any): void {
    // 你的复选框变更事件处理逻辑
  }

  private getCookie(name: string): string | null {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) {
      return parts.pop()?.split(';').shift() || null;
    }
    return null;
  }
}

关键说明 #

• 每个复选框绑定对应node的isChecked属性，确保状态独立可控。
• 在ngOnInit中处理Cookie检查和状态设置，确保页面渲染前状态已更新，加载时直接显示正确的勾选状态。
• 使用属性绑定替代插值语法，避免潜在的安全问题，同时符合Angular最佳实践。

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