Question

我使用PrimeNG的数据表和全局过滤器。我希望搜索输入位于子组件内。

PrimeNG通过执行此操作启用globalFilter

输入带有变量引用：

 <input #gb type="text" placeholder="Search">

并被用作PrimeNG的globalFilter的模型：

 <p-dataTable [globalFilter]="gb">

#gb是否可以在子组件中并在父组件中访问？

这里是plunker。如果您需要更多信息，请告诉我

Answer 1

不推荐使用

DataTable，请使用TurboTable。我想你可以使用ViewChild('dt') dt: Table获取表组件的引用并将其传递给child并执行dt.filterGlobal($event.target.value, 'contains')

<input (input)="dt.filterGlobal($event.target.value, 'contains')" type="text" pInputText >

如果你能提供一名侦探，我可以看看你的确切问题。

不确定EventEmitter方法是否有效，除非DataTable公开filter()函数。如果需要，您可以直接链接到#gb中的ChildComponent。

这是example

child.component.ts

import { Component, Output, EventEmitter, ViewChild } from '@angular/core';

@Component({
  selector: 'child-component',
  template: `<input #gb type="text" placeholder="Search">`
})
export class ChildComponent {
  @ViewChild('gb') gb: any;
}

app.component.html

<child-component #child></child-component>
<!-- You may as well need *ngIf="child.gb" in p-dataTable -->
<p-dataTable 
    [value]="data"
    [globalFilter]="child.gb.nativeElement">

无法保证这将如何运作，更好地改为TurboTable，这种转变并不像看起来那么艰难。

Angular5如何从子组件获取变量引用

1 个答案: