Angular5, как получить ссылку на переменную из дочернего компонента - PullRequest
Новая
       17

Angular5, как получить ссылку на переменную из дочернего компонента

0 голосов
/ 26 апреля 2018

Я использую таблицу данных PrimeNG с глобальным фильтром.Я хочу, чтобы входные данные поиска находились внутри дочернего компонента.

PrimeNG включает globalFilter, выполнив это

, имея вход со ссылкой на переменную: 

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

и используемыйкак модель для GlobalFilter PrimeNG: 

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

Возможно ли, чтобы #gb находился внутри дочернего компонента и был доступен в родительском компоненте?

Вот plunker ,Если вам нужна дополнительная информация, пожалуйста, дайте мне знать

1 Ответ

0 голосов
/ 26 апреля 2018

DataTable устарело, используйте TurboTable.Я полагаю, что вы можете получить ссылку на компонент таблицы, используя ViewChild('dt') dt: Table, передать ее потомку и сделать dt.filterGlobal($event.target.value, 'contains')

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

Если вы можете предоставить отзыв, я могу взглянуть на вашу проблему.

Не уверен, что подход EventEmitter будет работать, если только DataTable не предоставляет функцию filter().Вы можете напрямую связываться с #gb в ChildComponent, если хотите.

Вот пример

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трассия не такая жесткая, как может показаться.

...