Angular 7在组件的模板端获取元素id值

在Angular 7中，可以使用@ViewChild装饰器来获取组件模板端的元素id值。@ViewChild装饰器允许我们在组件类中引用模板中的元素，然后可以通过该引用获取元素的属性值。

下面是获取元素id值的步骤：

1. 在组件类中导入ViewChild和ElementRef：

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

1. 在组件类中定义一个ViewChild属性，并使用@ViewChild装饰器来引用模板中的元素：

@ViewChild('elementId', {static: false}) elementRef: ElementRef;

上面的代码中，elementId是模板中需要获取元素的id。

1. 在组件类中使用elementRef.nativeElement.id来获取元素的id值：

ngAfterViewInit() {
  const elementId = this.elementRef.nativeElement.id;
  console.log(elementId);
}

在ngAfterViewInit生命周期钩子函数中调用this.elementRef.nativeElement.id可以获取到元素的id值，并将其打印到控制台上。

注意事项：

• 在使用@ViewChild装饰器时，需要确保模板中的元素已经被渲染完毕，因此需要在ngAfterViewInit生命周期钩子函数中获取元素的id值。
• ViewChild装饰器的第一个参数可以是元素的id、组件类名、指令类名等。

对于腾讯云相关产品的推荐，可以参考以下链接：

• 腾讯云官方文档：https://cloud.tencent.com/document/product/215
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb-mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能（AI）服务：https://cloud.tencent.com/product/ai

请注意，以上推荐链接仅作为参考，具体选择云计算产品应根据实际需求进行评估。