Angular14中如何从HTML DOM以数组形式获取元素ID

问题描述 #

我正在使用Angular 14，想要以数组形式从HTML组件的DOM中获取元素ID。目前我能在TS文件中手动逐个获取ID，但无法实现动态获取或存入数组。

原代码示例：
header.ts

toHome() {
  const element = <HTMLElement>document.getElementById("home");
  return element;
}

toservice() {
  const element = <HTMLElement>document.getElementById("service");
  return element;
}
tohowitwork() {
  const element = <HTMLElement>document.getElementById("howitwork");
  return element;
}
toabout() {
  const element = <HTMLElement>document.getElementById("about");
  return element;
}

Header.component.html

<li><a class="nav-link" (click)="toHome()" href="#homebanner">Home</a></li>
<li> <a class="nav-link" (click)="toservice()"  href="#service">Service</a></li>
<li> <a class="nav-link" (click)="tohowitwork()" href="#howitwork">How it Works</a></li> 

解决方案 #

方法一：使用Angular ViewChildren（推荐，符合Angular规范）

这种方式不需要硬编码ID，通过模板引用变量动态捕获元素，再提取目标ID存入数组。

1. 修改HTML模板：给所有导航链接添加统一的模板引用变量（比如#navLink），并简化点击事件：

<li><a class="nav-link" #navLink (click)="handleNavigation($event)" href="#homebanner">Home</a></li>
<li><a class="nav-link" #navLink (click)="handleNavigation($event)" href="#service">Service</a></li>
<li><a class="nav-link" #navLink (click)="handleNavigation($event)" href="#howitwork">How it Works</a></li>

2. 修改TS文件：通过ViewChildren获取所有引用元素，在视图初始化后提取ID到数组：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements AfterViewInit {
  @ViewChildren('navLink') navLinks!: QueryList<ElementRef<HTMLElement>>;
  targetElementIds: string[] = []; // 存储目标元素ID的数组

  ngAfterViewInit(): void {
    // 从每个链接的href属性中提取目标ID（去掉开头的#）
    this.targetElementIds = this.navLinks.map(link => {
      const href = link.nativeElement.getAttribute('href');
      return href ? href.slice(1) : '';
    }).filter(id => id); // 过滤空值
  }

  handleNavigation(event: Event): void {
    event.preventDefault(); // 阻止默认跳转
    const targetId = (event.target as HTMLElement).getAttribute('href')?.slice(1);
    if (targetId) {
      const element = document.getElementById(targetId) as HTMLElement;
      if (element) {
        // 这里可以添加你的业务逻辑，比如滚动到目标元素
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
}

方法二：固定ID数组批量获取（适合已知ID集合的场景）

如果你的目标元素ID是固定的，可以直接定义ID数组，批量获取元素并存入数组：

1. 修改TS文件：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements AfterViewInit {
  // 定义所有目标元素ID
  private targetIds = ['home', 'service', 'howitwork', 'about'];
  targetElements: HTMLElement[] = []; // 存储目标元素的数组

  ngAfterViewInit(): void {
    // 批量获取元素并存入数组
    this.targetElements = this.targetIds
      .map(id => document.getElementById(id) as HTMLElement)
      .filter(el => el); // 过滤不存在的元素
  }

  navigateTo(targetId: string): void {
    const element = this.targetElements.find(el => el.id === targetId);
    if (element) {
      // 执行业务逻辑，比如滚动
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
}

2. 修改HTML模板：统一调用navigateTo方法，传入目标ID：

<li><a class="nav-link" (click)="navigateTo('home')" href="#homebanner">Home</a></li>
<li><a class="nav-link" (click)="navigateTo('service')" href="#service">Service</a></li>
<li><a class="nav-link" (click)="navigateTo('howitwork')" href="#howitwork">How it Works</a></li>

说明 #

两种方法都能解决重复代码的问题，实现动态获取元素ID并存入数组。优先推荐方法一，因为它更符合Angular的组件化思想，不需要硬编码ID；如果你的目标ID是固定不变的，方法二会更简洁。

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