Angular按钮单击模板参考变量不起作用

发布于 2025-01-24 02:14:06 字数 811 浏览 2 评论 0 原文

在角度应用中，我有两个HTML按钮。不确定是什么引起问题。

stackblitz代码

第一个按钮如下：我有按钮单击1st按钮，带有模板参考变量

<button (click)="accessButton(b)" #b >Click me!</button>

第二个按钮如下：问题：我有焦点事件事件，并希望将重点放在第二个按钮上时，将焦点设置为第1按钮。但是由于某种原因，模板参考变量是将错误设置为第一个按钮。

<button (click)="onYes()" (focusout)="onFocusOut($event)" [disabled]="isDisabled">Yes</button>

打字稿文件：

@ContentChild('onNo', { static: false }) elOnNo: ElementRef;
  accessButton(b) {
    alert('click');
  }

  onFocusOut($event) {
    this.elOnNo.nativeElement.focus();
  }

原文

I have two html buttons in angular application. Not sure what is causing issue.

Stackblitz code here

First button is as below: I have button click event on 1st button with template reference variable

<button (click)="accessButton(b)" #b >Click me!</button>

Second button is as below:
Problem:I have focusout event and want to set the focus to 1st button once user click on tab when the focus is on 2nd button. But for some reason template reference variable is getting error to set focus to first button.

<button (click)="onYes()" (focusout)="onFocusOut($event)" [disabled]="isDisabled">Yes</button>

Typescript file:

@ContentChild('onNo', { static: false }) elOnNo: ElementRef;
  accessButton(b) {
    alert('click');
  }

  onFocusOut($event) {
    this.elOnNo.nativeElement.focus();
  }

分享到QQ

分享到微博