我有一个自定义数据网格，我试图在我的主要组件中进行交互。
My Custom datagrid.component.ts
import { Component, EventEmitter, Injectable, Output, Input, OnChanges, OnInit, Host} from '@angular/core';
import { DataGridColumn, DataGridSorter, DataGridButton, DataGridSortInformation, DataGridEventInformation } from './datagrid.core';
import { TransactionalInformation } from '../entities/transactionalinformation.entity';
@Component({
selector: 'datagrid',
styleUrls: ['app/shared/datagrid/datagrid.css'],
inputs: ['rows: rows', 'columns: columns'],
templateUrl: 'app/shared/datagrid/datagrid.component.html'
})
@Injectable()
export class DataGrid implements OnInit {
public columns: Array<DataGridColumn>;
public rows: Array<any>;
public sorter: DataGridSorter;
public pageSizes = [];
public sortColumn: string;
public sortDesending: Boolean;
public sortAscending: Boolean;
@Output() datagridEvent;
@Input() pageSize: number;
public disableFirstPageButton: Boolean;
public disablePreviousPageButton: Boolean;
public disableNextPageButton: Boolean;
public disableLastPageButton: Boolean;
public pageSizeForGrid: number;
public currentPageNumber: number;
public totalRows: number;
public totalPages: number;
public itemNumberBegin: number;
public itemNumberEnd: number;
constructor() {
this.sorter = new DataGridSorter();
this.datagridEvent = new EventEmitter();
this.disableNextPageButton = false;
this.disableLastPageButton = false;
this.disableFirstPageButton = false;
this.disablePreviousPageButton = false;
this.disableFirstPageButton = true;
this.disablePreviousPageButton = true;
this.pageSizes.push(5);
this.pageSizes.push(10);
this.pageSizes.push(15);
this.pageSizeForGrid = 10;
this.sortColumn = "";
this.sortAscending = false;
this.sortDesending = false;
}
public ngOnInit() {}
public databind(transactionalInformation: TransactionalInformation) {
this.currentPageNumber = transactionalInformation.currentPageNumber;
this.totalPages = transactionalInformation.totalPages;
this.totalRows = transactionalInformation.totalRows;
this.itemNumberBegin = ((this.currentPageNumber - 1) * this.pageSize) + 1;
this.itemNumberEnd = this.currentPageNumber * this.pageSize;
if (this.itemNumberEnd > this.totalRows) {
this.itemNumberEnd = this.totalRows;
}
this.disableNextPageButton = false;
this.disableLastPageButton = false;
this.disableFirstPageButton = false;
this.disablePreviousPageButton = false;
if (this.currentPageNumber == 1) {
this.disableFirstPageButton = true;
this.disablePreviousPageButton = true;
}
if (this.currentPageNumber == this.totalPages) {
this.disableNextPageButton = true;
this.disableLastPageButton = true;
}
}
}
}
主页.components.ts
import { Component, OnInit, EventEmitter, Output, ViewChild, AfterViewInit, trigger, state, style, animate, transition } from '@angular/core';
import { DataGridColumn, DataGridButton, DataGridEventInformation } from '../shared/datagrid/datagrid.core';
import { DataGrid } from '../shared/datagrid/datagrid.component';
import { Router } from '@angular/router';
import { AlertService } from '../shared/services/alert.service';
import { CustomerService } from '../shared/services/customer.service';
import { AlertBoxComponent } from '../shared/alertbox.component';
import { Customer } from '../shared/entities/customer.entity';
import { TransactionalInformation } from '../shared/entities/transactionalinformation.entity';
import { NotificationService } from '../shared/utils/notification.service';
@Component({
moduleId: module.id,
templateUrl: 'home.component.html',
animations: [
trigger('flyInOut', [
state('in', style({ opacity: 1, transform: 'translateX(0)' })),
transition('void => *', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('0.6s ease-in')
]),
transition('* => void', [
animate('0.2s 10 ease-out', style({
opacity: 0,
transform: 'translateX(100%)'
}))
])
])
]
})
export class HomeComponent implements OnInit {
@ViewChild(DataGrid) private Grid: DataGrid;
public title: string = 'Document List';
public customers: Customer[];
public columns = [];
public alerts: Array<string> = [];
public messageBox: string;
public totalRows: number;
public currentPageNumber: number = 1;
public totalPages: number;
public pageSize: number;
public companyName: string;
public customerCode: string;
private sortDirection: string;
private sortExpression: string;
public autoFilter: Boolean;
public delaySearch: Boolean;
public runningSearch: Boolean;
constructor(private alertService: AlertService,
private customerService: CustomerService,
private router: Router,
private notificationService: NotificationService) {
this.currentPageNumber = 1;
this.autoFilter = false;
this.totalPages = 0;
this.totalRows = 0;
this.pageSize = 15;
this.sortDirection = "ASC";
this.sortExpression = "CompanyName";
}
public ngOnInit() {
this.columns.push(new DataGridColumn('customerCode', 'Date Filed', '[{"width": "9%" , "disableSorting": false}]'));
this.columns.push(new DataGridColumn('companyName', 'PO Name', '[{"width": "9%" , "hyperLink": true, "disableSorting": false}]'));
this.columns.push(new DataGridColumn('city', 'Document', '[{"width": "9%" , "disableSorting": false}]'));
this.columns.push(new DataGridColumn('zipCode', 'Service Type', '[{"width": "9%" , "disableSorting": false}]'));
this.columns.push(new DataGridColumn('dateUpdated', 'Case Number', '[{"width": "9%" , "disableSorting": false, "formatDate": true}]'));
this.columns.push(new DataGridColumn('zipCode', 'Status', '[{"width": "9%" , "disableSorting": false}]'));
this.columns.push(new DataGridColumn('dateUpdated', 'Status Date', '[{"width": "9%" , "disableSorting": false, "formatDate": true}]'));
this.executeSearch();
}
private executeSearch(): void {
if (this.runningSearch == true) return;
let miliseconds = 500;
if (this.delaySearch == false) {
miliseconds = 0;
}
this.runningSearch = true;
setTimeout(() => {
let customer = new Customer();
customer.customerCode = this.customerCode;
customer.companyName = this.companyName;
customer.pageSize = this.pageSize;
customer.sortDirection = this.sortDirection;
customer.sortExpression = this.sortExpression;
customer.currentPageNumber = this.currentPageNumber;
this.customerService.getCustomers(customer)
.subscribe(
response => this.getCustomersOnSuccess(response),
response => this.getCustomersOnError(response));
}, miliseconds)
}
private getCustomersOnSuccess(response: Customer): void {
let transactionalInformation = new TransactionalInformation();
transactionalInformation.currentPageNumber = this.currentPageNumber;
transactionalInformation.pageSize = this.pageSize;
transactionalInformation.totalPages = response.totalPages;
transactionalInformation.totalRows = response.totalRows;
transactionalInformation.sortDirection = this.sortDirection;
transactionalInformation.sortExpression = this.sortExpression;
this.customers = response.customers;
this.Grid.databind(transactionalInformation);
this.alertService.renderSuccessMessage(response.returnMessage);
this.messageBox = this.alertService.returnFormattedMessage();
this.alerts = this.alertService.returnAlerts();
this.runningSearch = false;
}
private getCustomersOnError(response): void {
this.alertService.renderErrorMessage(response.returnMessage);
this.messageBox = this.alertService.returnFormattedMessage();
this.alerts = this.alertService.returnAlerts();
this.runningSearch = false;
}
public datagridEvent(event) {
let datagridEvent: DataGridEventInformation = event.value;
if (datagridEvent.EventType == "PagingEvent") {
this.pagingCustomers(datagridEvent.CurrentPageNumber);
}
else if (datagridEvent.EventType == "PageSizeChanged") {
this.pageSizeChanged(datagridEvent.PageSize);
}
else if (datagridEvent.EventType == "ItemSelected") {
this.selectedCustomer(datagridEvent.ItemSelected);
}
else if (datagridEvent.EventType == "Sorting") {
this.sortCustomers(datagridEvent.SortDirection, datagridEvent.SortExpression);
}
}
private selectedCustomer(itemSelected: number) {
let rowSelected = itemSelected;
let row = this.customers[rowSelected];
let id = row.customerID;
let link = ['/customer', id];
this.router.navigate(link);
}
private sortCustomers(sortDirection: string, sortExpression: string) {
this.sortDirection = sortDirection;
this.sortExpression = sortExpression;
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
private pagingCustomers(currentPageNumber: number) {
this.currentPageNumber = currentPageNumber;
this.delaySearch = false;
this.executeSearch();
}
private pageSizeChanged(pageSize: number) {
this.pageSize = pageSize;
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
public reset(): void {
this.customerCode = "";
this.companyName = "";
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
public search(): void {
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
public companyNameChanged(newValue): void {
if (this.autoFilter == false) return;
if (newValue == "") return;
this.companyName = newValue;
this.currentPageNumber = 1;
this.delaySearch = true;
setTimeout(() => {
this.executeSearch();
}, 500)
}
public customerCodeChanged(newValue): void {
if (this.autoFilter == false) return;
if (newValue == "") return;
this.customerCode = newValue;
this.currentPageNumber = 1;
this.delaySearch = true;
setTimeout(() => {
this.executeSearch();
}, 500)
}
}
我在这里面临的问题是无法实例化继承数据网格组件的网格对象，无法从中创建实例来执行某些操作。
请在下面做必要的事情，如果可能的话