typescript - angular material: utöka en MatPaginator utan att skapa en duplicerad paginator

@Component({
    selector: 'app-custom-paginator',
    template: '<mat-paginator #paginator pageSize="10"></mat-paginator>',
    })
export class CustomPaginator extends MatPaginator {
    @ViewChild(MatPaginator) paginator: MatPaginator;

    customMethod(): number {
        return 1
    }
}

huvudkomponent:

@Component({
    selector: 'app-main-component',
    template: '<app-custom-paginator></app-custom-paginator>',
})
export class MainComponent implements OnInit, AfterViewInit {
    @ViewChild(CustomPaginator) paginator: CustomPaginator;
}

Jag försöker lista ut ett sätt att utöka MatPaginator. Jag sitter fast eftersom jag i min barnkomponent CustomPaginator måste använda @ViewChild för att få tillgång till den skapade MatPaginator som den anpassade paginatorn skapade från sin vy.

Det jag egentligen vill är att på något sätt skapa en CustomPaginator från min MainComponent utan att CustomPaginator behöver skapa och komma åt ett eget MatPaginator-vybarn, eftersom CustomPaginator ÄR en MatPaginator.

Svar #1

Du kan använda MatPaginator-komponentens mall inuti barnkomponenten

@Component({
    selector: 'app-custom-paginator',
    template: (<any>MatPaginator).__annotations__[0]['template'],
})
export class CustomPaginator extends MatPaginator {

    customMethod(): number {
        return 1
    }
}

Jag hade gjort dessa med anpassade baskomponenter som aldrig används på materialkomponenter. Du kan prova

Svar #2

För att få din CustomPaginator att fungera måste du kalla på superkonstruktorn :

import {MatPaginator, MatPaginatorIntl} from '@angular/material/paginator';
import {ChangeDetectorRef} from '@angular/core';

// ...

export class CustomPaginator extends MatPaginator {

    constructor(
        intl: MatPaginatorIntl,
        changeDetectorRef: ChangeDetectorRef,
    ) {
        super(intl, changeDetectorRef);
    }

}

Relaterade artiklar