Angular 使用模板引用变量单击按钮不起作用

Question

我在 angular 应用程序中有两个 html 按钮。 不确定是什么导致了问题。

Stackblitz 代码在这里

第一个按钮如下：我在第一个按钮上有按钮单击事件和模板引用变量

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

第二个按钮如下： 问题：我有 focusout 事件，当焦点在第二个按钮上时，一旦用户单击选项卡，我想将焦点设置到第一个按钮。 但由于某种原因，模板引用变量在将焦点设置到第一个按钮时出错。

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

Typescript 档案：

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

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

Answer 1

获取具有#elementId的 HTML 元素时，您必须使用

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

在你的情况下就是这样。

@ViewChild('b', {static: false}) elOnNo: ElementRef

同样在您的 StackBlitz 示例中，一些被调用的方法似乎丢失了。

这是@ViewChild的文档