如何从angular14中的html dom获取ID

Question

我正在使用角14，我试图从HTML (Html组件)获得一个数组形式的ID。手动地，我从TS文件中的HTML组件获得Id，但是动态或数组中没有传递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> 

Answer 1

您需要在下面使用viewchild演示。

ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('home') home: ElementRef<any>;
  @ViewChild('service') service: ElementRef<any>;
  @ViewChild('howItWorks') howItWorks: ElementRef<any>;
  name = '';

  toHome() {
    return this.home;
  }

  toservice() {
    return this.service;
  }
  tohowitwork() {
    return this.howItWorks;
  }
}

html

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

Current {{ name }}

叉式堆栈闪电战