0

*有很多类似的问题，但我没有找到一个真正的副本来回答我的问题，如果我错过了什么，请道歉。

我有一个包含多个输入/按钮的页面（重复相同的组件），并且需要在按钮单击时关注正确的输入。

我已经尝试过 elementRef、nativeElement、基于 ID 的变体……但我只能让它专注于 DOM 中的第一个或特定的……

<ng-template #myTemplate let-context="context">
<input #foo [id]="'myInput'+context.id" />
<button class="btn" [id]="'btnAction'+context.id (click)="focusOnInput()"></button>
</ng-template>

在 DOM 中呈现如下：

<input #foo id="myInput1" />
<button class="btn" id="btnAction1></button>

<input #foo id="myInput2" />
<button class="btn" id="btnAction2></button>

<input #foo id="myInput3" />
<button class="btn" id="btnAction3></button>

这是我一直在尝试的：

@ViewChild("foo") focusOnThis: ElementRef;
focusOnInput(): void {
this.focusOnThis.nativeElement.focus();
}

期望的行为：单击按钮时，将注意力集中在相应的输入上。目前，它只关注第一个，或者我指定的任何 ID...

4

2 回答 2

2

您可以调用foo.focus()按钮单击处理程序。由于模板引用变量的范围#foo是模板实例，因此它将引用同级输入元素。

<ng-template #myTemplate let-context="context">
  <input #foo />
  <button class="btn" (click)="foo.focus()"></button>
</ng-template>

请参阅此 stackblitz以获取演示。

如果您需要从方法设置焦点，foo请将其作为参数传递给它：

<ng-template #myTemplate let-context="context">
  <input #foo />
  <button class="btn" (click)="focusOnInput(foo)"></button>
</ng-template>

focusOnInput(input): void {
  // Do something else here
  ...
  input.focus();
}
于 2019-04-18T14:22:44.773 回答
0

如何使用带有 id 的数据属性并从中获取输入？

<ng-template #myTemplate let-context="context">
<input [attr.data-group]="context.id" />
<button class="btn" [attr.data-group]="context.id" (click)="focusOnInput($event)"></button>
</ng-template>

<input data-group="1" />
<button class="btn" data-group="1"></button>

<input data-group="2" />
<button class="btn" data-group="2"></button>

<input data-group="3" />
<button class="btn" data-group="3"></button>

// component constructor
constructor(
    private readonly elementRef: ElementRef,
    // ...
  ) {
    // ...
  }

focusOnInput(event: MouseEvent): void {
    const groupId = (<HTMLElement>event.target).dataset.group;
    const input = this.elementRef.nativeElement.querySelector(`input[data-group="${groupId}"]`);
    input.focus();
}
于 2019-04-18T14:23:11.443 回答