Angular中动态绑定和访问ElementRef的策略

<div class="nav-container">
  <div class="nav-item" *ngFor="let input of inputs" #dynamicNavItem>
    {{ input.name }}
  </div>
</div>

import { Component, OnInit, AfterViewInit, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class MyComponent implements OnInit, AfterViewInit {

  // 模拟数据源
  inputs = [
    { name: 'Dashboard', id: 'dash-item' },
    { name: 'Analytics', id: 'ana-item' },
    { name: 'Settings', id: 'set-item' },
  ];

  // 使用 @ViewChildren 查询所有带有 #dynamicNavItem 的 ElementRef
  // static: false 是默认值，但明确写出有助于理解
  @ViewChildren('dynamicNavItem', { read: ElementRef, static: false })
  dynamicNavItems!: QueryList<ElementRef>;

  constructor() { }

  ngOnInit(): void {
    // 在 ngOnInit 阶段，dynamicNavItems 对于动态元素通常是空的
    console.log('ngOnInit - dynamicNavItems:', this.dynamicNavItems?.toArray());
  }

  ngAfterViewInit(): void {
    // 在 ngAfterViewInit 阶段，动态元素已经渲染到DOM中，QueryList 已被填充
    console.log('ngAfterViewInit - dynamicNavItems:', this.dynamicNavItems.toArray());

    if (this.dynamicNavItems) {
      this.dynamicNavItems.forEach((elementRef: ElementRef, index: number) => {
        const nativeElement = elementRef.nativeElement;
        console.log(`Element ${index} (name: ${this.inputs[index].name}):`, nativeElement);

        // 示例：修改每个动态元素的样式
        nativeElement.style.backgroundColor = index % 2 === 0 ? '#e0f7fa' : '#fce4ec';
        nativeElement.style.padding = '10px';
        nativeElement.style.margin = '5px';
        nativeElement.style.borderRadius = '4px';

        // 示例：根据数据源中的id属性查找特定元素
        if (this.inputs[index].id === 'ana-item') {
          nativeElement.classList.add('highlighted-item');
        }
      });

      // 订阅 QueryList 的变化
      // 如果 inputs 数组在组件生命周期内发生变化（例如添加/删除元素），
      // QueryList 会更新，并触发 changes Observable
      this.dynamicNavItems.changes.subscribe((list: QueryList<ElementRef>) => {
        console.log('dynamicNavItems 列表已更新:', list.toArray());
        // 在这里可以处理列表变化后的逻辑
      });
    }
  }
}

.nav-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

.nav-item {
  cursor: pointer;
  border: 1px solid #ddd;
}

.highlighted-item {
  border: 2px solid #007bff;
  font-weight: bold;
}