当 Angular 2 中发生 keyup 事件时，防止默认单击事件答案

【问题标题】：prevent default of click event when keyup event ocuurs in angular2当 Angular 2 中发生 keyup 事件时，防止默认单击事件
【发布时间】：2017-11-09 20:15:25
【问题描述】：

在触发 keyup 事件时的搜索输入字段中，显示数据，在再次触发 keyup 事件后，单击事件正在工作，但我希望一旦触发 keyup 或单击其他一个将不起作用。

这是我在 header.html

中的表单

<form>
     <div class="box">
         <div class="container-1">
            <input type="search" id="search" placeholder="Type 
                 your search..." name="searchStr" (keyup.enter)="searchKey(input.value)" 
                [(ngModel)]="searchStr" #input>
            <a (click)="searchKey(input.value)"><img 
              src="/assets/search.png" class="search-img"></a>
        </div>
     </div>
</form>

这是我的 header.component.ts

searchKey(value: any) {
    console.log(value);
    this.router.navigate(['search', { searchkey : value }]);
}

提前谢谢你。

【问题讨论】：

标签： html css angular2-forms

【解决方案1】：

尝试设置一个标志变量来检查是否搜索，

export ... {

    flag = true;

    searchKey(value: any) {
        console.log(value);
        this.flag && this.router.navigate(['search', { searchkey : value }]);
        this.flag=false;
    }

    // don't forget to add a condition when flag must be set to true.
}

希望这会对你有所帮助。

【讨论】：