Угловой материал: расширить MatPaginator, не создавая двойной пагинатор - PullRequest
0 голосов
/ 20 мая 2018
@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
    }
}

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

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

Я пытаюсь найти способ расширения MatPaginator.Я застрял, потому что в моем дочернем компоненте CustomPaginator мне приходится использовать @ViewChild, чтобы получить доступ к созданному MatPaginator, созданному этим пользовательским пагинатором из его представления.

Что я действительно хочусостоит в том, чтобы каким-то образом создать CustomPaginator из моего MainComponent без необходимости CustomPaginator создавать и обращаться к собственному дочернему элементу MatPaginator view, поскольку CustomPaginator IS MatPaginator.

1 Ответ

0 голосов
/ 21 июня 2019

Вы можете использовать шаблон компонента MatPaginator внутри дочернего компонента

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

    customMethod(): number {
        return 1
    }
}

Я сделал это с пользовательскими базовыми компонентами, которые никогда не использовались в компонентах материала.Вы можете попробовать

...