html - 当 angular 2 中发生 keyup 事件时，防止点击事件默认

Question

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

这是我在 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 }]);
}

提前致谢。

Answer 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.
}

希望对您有所帮助。