Angular 7 и JQWidgets — экспорт данных сетки из другого компонента

Я экспериментирую с Angular 7 и JQWidgets. Я работаю над компонентом Grid и хочу экспортировать данные Grid из другого компонента, называемого настройками. Я работал над демо (доступно здесь), и я создал следующий компонент:

import { Component, ElementRef, Input, AfterViewInit, ViewChild} from '@angular/core';
import { jqxDropDownListComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxdropdownlist';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';

@Component({
  selector: 'app-mydemo',
  templateUrl: './mydemo.component.html'
})

export class MydemoComponent{
    @ViewChild('myGrid') myGrid: jqxGridComponent;
    @ViewChild('myDropDownList') myDropDownList: jqxDropDownListComponent;

    exportFiletype: any;

    constructor() { }

    exportBtnOnClick() {
        this.exportFiletype = this.myDropDownList.getSelectedItem().value;
        switch (this.exportFiletype) {
            case 'Excel':
                this.myGrid.exportdata('xls', 'jqxGrid', true, null, true, 'https://jqwidgets.com/export_server/dataexport.php');
                break;
            case 'CSV':
                this.myGrid.exportdata('csv', 'jqxGrid', true, null, true, 'https://jqwidgets.com/export_server/dataexport.php');
                break;
        };
    };
}

Моя проблема заключается в том, что this.myGrid ссылается на сетку в другом компоненте. Как я могу обратиться прямо к нему?


angular angular7 jqwidget
person lios    schedule 25.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Обновлено в соответствии с новой информацией: -

Используйте одну из моделей https://angular.io/guide/component-interaction для взаимодействия. между компонентами.

Ниже приведен пример переменных шаблона.

Основной компонент

//showing only html

<my-grid #myGrid><my-grid>
<my-dropdown [grid]="myGrid.jqxGrid"><my-dropdown>

Компонент А (выпадающий список)

Используйте onSelect, и вы также можете передать свою ссылку myDropDownList, чтобы вы могли передать любую ссылку, которую вы хотите

Привязать к событию выбора jqxDropDownList.

import { Component } from "@angular/core";

@Component({
    selector: "my-dropdown",
    template: `
        <jqxDropDownList #myDropDownList (onSelect)="exportTo($event)"
            [width]="200" [height]="25" [source]="source" [selectedIndex]="1">
        </jqxDropDownList>
    `
})

export class MyDropDown{
    @Input() grid: jqxGridComponent
    exportTo(event: any): void 
    {
        if (this.grid) {
            this.grid.doSomething()
        }
    }

    source: string[] =
    [
        'Affogato',
        'Americano',
        'Bicerin',
        'Breve'
    ];
}

Компонент B — компонент сетки

template: `
<jqxGrid #jqxGrid [theme]="'material'"
    [width]="getWidth()" [source]="dataAdapter" [columns]="columns"
    [pageable]="true" [autoheight]="true" [sortable]="true" 
    [altrows]="true"  [enabletooltips]="true"  [editable]="true" 
    [selectionmode]="'multiplecellsadvanced'" [columngroups]="columngroups">
</jqxGrid>
`
export class MyGrid {
     @ViewChild('jqxGrid') jqxGrid: jqxGridComponent;
}
person bhantol    schedule 25.03.2019
comment
Но моя сетка находится в другом компоненте. Я хочу экспортировать данные в компонент A из компонента B. Как написать this.myGrid.exportdata по-другому? - person lios; 25.03.2019
comment
Отношения между родителями и детьми от A до B или они братья и сестры? - person bhantol; 25.03.2019
comment
они братья и сестры - person lios; 25.03.2019
comment
Я обновил ответ, но это всего лишь один из способов сделать это, но я рекомендую вам обратиться к angular.io /guide/component-interaction - person bhantol; 25.03.2019
comment
Используйте @ContntChild - person bhantol; 14.05.2019