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>

搜索组件.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 是一个表单，当我点击输入时，搜索也应该工作。

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

出了什么问题？

Answer 1

我的行为和你一样。我不知道为什么这个问题与名称“搜索”输出事件发射器变量有关。请将其更改为任何其他名称，例如“测试”并在您的

中执行此操作

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

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

和

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

这会起作用