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是一个表单，当我点击输入时，搜索也应该有效。

但是当我点击两次输入其调用过滤器功能时。首先传递确切的参数，第二次将事件类型作为参数传递。我怎么能阻止它？

出了什么问题？

Answer 1

我得到了与你相同的行为。我不知道为什么这个问题是名称'search'输出事件 - 发射器变量。请将此更改为任何其他名称，例如'test'，并在您的

中执行此操作

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

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

和

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

这将有效

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

1 个答案: