Angular 材: extend a MatPaginator without creating a dupe 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
    }
}

主要组成部分:

@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来访问自定义分页器从其 View 创建的MatPaginator。

我真正想要的是以某种方式从我的CustomPaginator创建一个MainComponent，而CustomPaginator无需创建和访问其自己的MatPaginator View 子级，因为CustomPaginator是MatPaginator。

最佳答案

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

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

    customMethod(): number {
        return 1
    }
}

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