angular4 中的共享 html 未按预期工作？

Question

我正在使用共享 html 在每个页面中进行搜索

search.component.html

   <form class="p-2" (ngSubmit)="searchHere(query)" #customersearch="ngForm">
  <div class="input-group custom-search-form float-right">
<input type="search" class="form-control" name="search" placeholder="Search..." [(ngModel)]="searchQuery" />
<span class="input-group-btn">
            <button class="btn btn-default-sm" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </span>
  </div>
 </form>

搜索component.ts

  @Component({
moduleId: module.id,
selector: 'search-items',
templateUrl: './search.component.html',
           })

    export class SearchComponent {

@Output() search = new EventEmitter<string>();
searchQuery:string;

searchHere(text?: string) {
    console.log(text)
    this.search.emit(text);
}

   }

我正在客户组件中使用它 html 喜欢

 <search-items (search)="filter($event,'q')"></search-items>

当我单击搜索按钮时，它工作正常，但由于共享 html 是一个表单，当我单击 enter 时搜索也应该工作。

但是当我点击两次进入它的调用过滤功能。首先它传递确切的参数，第二次它传递一个事件类型作为参数。我该如何预防？

出了什么问题？

Answer 1

我得到了和你一样的行为。我不知道为什么这个问题与名称 'search' 输出事件发射器有关 variable.please 将其更改为任何其他名称，例如 'test' 并在您的

中执行此操作

@Output() test= new EventEmitter<string>();

searchData() {
    this.test.emit(this.searchQuery);
}

和

<search-items (test)="filter($event)"></search-items>

这会起作用

angular4 中的共享 html 未按预期工作？

Shared html in angular4 not working as expected?

angular2-forms

angular2-directives

angular