Angular Material : extend a MatPaginator without creating a dupe paginator

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从其 View 创建的分页器。

我真正想要的是以某种方式从我的 MainComponent 创建一个 CustomPaginator 而 CustomPaginator 不需要创建和访问 MatPaginator 查看它自己的子项，因为 CustomPaginator 是一个 MatPaginator。

Answer 1

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

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

    customMethod(): number {
        return 1
    }
}

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