Question

角色2中的新手。我有一个表，每个tr都绑定到一个对象（我们称之为worker）。我将鼠标悬停事件附加到该tr，我想在表单上的另一个输入字段中显示此对象实例属性（比如worker.firstname）。当我到达js函数时，我设法对此属性进行简单警报，但我想设置具有该值的输入字段文本。所以，我想把元素作为参数传递给函数，就像那样（使用jquery选择器，我不确定是否包括在内）：

<tr *ngFor = 'let worker of Workers' (mouseover)="showAdditionalData(worker, 
$('#txtWorkerAdditionalData'))" >

或者可能使用旧的getElementByID。这样做的最佳方式是什么？附上一个代码块：这是我想用worker name填充的html元素：

<input type="text" id="txtWorkerAdditionalData" />

这是js函数：

showAdditionalData(worker: IWorker, element: any) : void{
element.text = worker.FirstName;
alert (worker.FirstName);
}

Answer 1

正如我在评论中提到的 - 当你使用像Angular或React这样的库时，很少有DOM操作。他们的一半吸引力是他们为你处理这些东西！

以下是我实现这种功能的方法。从showAdditionalData中删除元素参数，然后传入worker：

<tr *ngFor="let worker of Workers" (mouseover)="showAdditionalData(worker)">
    ...
</tr>

然后，从工作人员中获取名字并将其分配给组件上的字段：

public currentWorkerName: string = "";

showAdditionalData(worker: IWorker): void {
     this.currentWorkerName = worker.FirstName;
}

现在您可以将currentWorkerName绑定到您的输入：

<input type="text" (value)="currentWorkerName" />

完成！并且没有看到DOM元素：）

这个答案假设表和输入都在同一个组件中，但如果不是这样的话，你就不会运气 - 要么使用@Input和@Output通过通过组件树的数据/事件，或将currentWorkerName拉出到服务中并将其注入两个组件中。

Answer 2

如果要引用模板中的元素，可以使用tempate变量和ViewChild装饰器来获取元素ref。

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

@Component({
  selector: 'example',
  template: `
    <tr #templateVariable
      *ngFor = 'let worker of Workers'
      (mouseover)="showAdditionalData(worker, $('#txtWorkerAdditionalData'))">
  `
})
export class ExampleComponent implements OnInit {
  @ViewChild('templateVariable') element: ElementRef;

  constructor(
  ) { }

  ngOnInit() {
  }


  ngAfterViewInit() {
    console.log('element: ', this.element.nativeElement.value);
  }

}

你永远不应该直接访问dom，因为它违反了惯例，并且显然打破了很多Angular 2的功能。

您可以阅读有关ViewChild and ViewChildren here.的更多信息。

另请注意，即使没有模板变量，您也可以使用这些装饰器来获取任何类型的元素。请查看上面的链接以获取示例。

祝你好运！

引用位于角度2组件中的js函数中的html元素的最佳方法

2 个答案: