角度材料:扩展MatPaginator而不创建欺骗分页器

Question

@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它自己的视图子,因为CustomPaginatorIS a MatPaginator.

Answer 1

您可以在子组件中使用 MatPaginator 组件的模板

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

    customMethod(): number {
        return 1
    }
}

我使用从未在材质组件上使用过的自定义基础组件完成了这些任务。你可以试试