Angular 2组件交互

Question

我有一个自定义数据网格，我试图在我的主要组件中进行交互。

app.UseIdentityServerBearerTokenAuthentication(new IdentityServerBearerTokenAuthenticationOptions
{
    Authority = identServer,
    RequiredScopes = new[] { "api1" }
});

Home.components.ts

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;
        }

    }    

    }

}

我面临的问题是无法实例化继承datagrid组件的网格对象，无法从中创建实例以进行某些操作。

请尽量做到需要，如果可能的话，也可以在这些以下

Angular 2 Routing Refresh

Angular 2 Release Version Component