如何单击Bootstrap 4输入组中的HTML输入来触发绑定的Angular事件

<div class="input-group">
  <input type="text" class="form-control" id="myInput">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" id="myButton">点击我</button>
  </div>
</div>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  @ViewChild('myInput') myInput: ElementRef;
  @ViewChild('myButton') myButton: ElementRef;

  // 在这里定义绑定的Angular事件
  onButtonClick() {
    // 执行一些操作
    console.log('按钮被点击了');
  }
}

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements AfterViewInit {
  @ViewChild('myInput') myInput: ElementRef;
  @ViewChild('myButton') myButton: ElementRef;

  ngAfterViewInit() {
    this.myButton.nativeElement.addEventListener('click', this.onButtonClick.bind(this));
  }

  // 在这里定义绑定的Angular事件
  onButtonClick() {
    // 执行一些操作
    console.log('按钮被点击了');
  }
}