角度打字稿 - 按下回车键时调用子指令中的事件

编程问答 2022-05-28

问题描述

我有 3 个嵌套组件。

第一个 component.html 我使用了第二个组件的选择器，并在第二个 component.html 中调用了第三个组件。

2nd component.html 有一个输入框： 第三个 component.html 有按钮。 在第三个 component.ts - 我有一个 onclick 事件，它将读取获取输入框的值并重定向到新的 URL 为：

@HostListener('click',['$event']) onClick($event) {
    $event.preventDefault();
    window.location.href =`${this.URL}`;
}

我想在输入框中输入一些文本后按下回车键时实现相同的效果。 基本上，在按下 Enter 键的同时，用户键入输入后的按钮单击，应该触发第三个组件中的 onClick 事件。 问题是第三个组件具有来自用于 URL 形成的第一和第二个组件的输入变量。 如何实现这一点

以下是我的组件：

**1st component.html** 

<input-Box [placeHolder]="'Type Here'" [searchType]="'A'"></input-Box>


**2nd component : input-Box.html**

<div class="Box">
    <input type="text" (input)="searchValue=$event.target.value" placeholder={{placeHolder}} />
    <btn-icon [searchType]='searchType' [searchText]='searchValue'></btn-icon>
</div>

**3rd component - btn-icon.html**

<button id="btn1" class="btn" />

3rd component.ts :
export class btn-icon implements OnInit {
  
  @input() searchType: string;
  @input() searchText: string;
 
  ngOnInit(): void {
  }

@HostListener('click',['$event']) onClick($event) {
    $event.preventDefault();
    window.location.href =`${this.URL}${this.searchText}`;
}
    
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularkeyeventtypescripttypescripttypescript