如何根据在Angular 6中的ng模板中的id引用元素？

在Angular 6中，可以使用#符号来定义模板中的元素引用。通过在元素上添加#符号和一个唯一的标识符，可以在组件类中引用该元素。

以下是在Angular 6中如何根据ng模板中的id引用元素的步骤：

1. 在ng模板中，找到需要引用的元素，并在其上添加#符号和一个标识符。例如，假设我们要引用一个按钮元素，可以这样写：

<button #myButton>Click me</button>

1. 在组件类中，使用@ViewChild装饰器来引用该元素。在组件类的顶部，导入ViewChild装饰器和ElementRef类：

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

1. 在组件类中，使用@ViewChild装饰器来引用元素。将装饰器应用于一个类成员变量，并传入标识符和ElementRef类型。例如，假设我们要引用上面模板中的按钮元素，可以这样写：

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

1. 现在，可以在组件类中使用myButton变量来访问该元素。例如，可以在组件类的某个方法中添加以下代码来改变按钮的文本：

changeButtonText() {
  this.myButton.nativeElement.innerText = 'New text';
}

在上述代码中，myButton.nativeElement表示引用的元素本身，可以通过它来访问元素的属性和方法。

需要注意的是，@ViewChild装饰器的第二个参数{static: false}用于指定是否在静态查询中使用。在Angular 9及更高版本中，默认为静态查询，但在Angular 8及更低版本中，默认为动态查询。如果在Angular 6中使用静态查询，需要将{static: false}参数添加到@ViewChild装饰器中。

这是一个根据在Angular 6中的ng模板中的id引用元素的完整示例。请注意，这只是一个示例，实际应用中可能需要根据具体情况进行调整。

参考链接：

• Angular官方文档：https://angular.io/
• Angular中文文档：https://angular.cn/