如何在组件中访问扩展MatPaginatorIntl类的自定义属性？

问题原因 #

你之前用@ViewChild获取MatPaginatorIntl实例的方式无效，核心原因是MatPaginatorIntl是Angular服务类，而非组件或指令，@ViewChild仅能获取模板中的组件、指令或DOM元素实例，无法获取服务实例。

正确解决方案 #

1. 确保自定义扩展类已注册为服务 #

在你的模块（如AppModule）中，将自定义的MatPaginatorIntl扩展类配置为MatPaginatorIntl的替代实现：

import { NgModule } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { CustomPaginatorIntl } from './custom-paginator-intl';

@NgModule({
  providers: [
    { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }
  ]
})
export class AppModule {}

2. 在组件中通过依赖注入获取实例 #

直接在组件构造函数中注入自定义扩展类的实例，即可调用其方法或设置属性：

import { Component, OnInit } from '@angular/core';
import { CustomPaginatorIntl } from './custom-paginator-intl';

@Component({
  selector: 'app-paginator-configurable',
  templateUrl: './paginator-configurable-example.html'
})
export class PaginatorConfigurableExample implements OnInit {
  constructor(private customPaginatorIntl: CustomPaginatorIntl) {}

  ngOnInit(): void {
    // 调用自定义方法设置属性
    this.customPaginatorIntl.setSomeProperty('自定义内容');
    // 若直接修改公开属性，写法如下
    // this.customPaginatorIntl.someProperty = '自定义内容';
    
    // 关键：修改后需触发变更通知，让分页器更新标签
    this.customPaginatorIntl.changes.next();
  }
}

3. 兼容注入基类的情况 #

如果你是通过MatPaginatorIntl基类注入，只需将实例断言为自定义类类型即可：

import { Component, OnInit } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { CustomPaginatorIntl } from './custom-paginator-intl';

@Component({
  selector: 'app-paginator-configurable',
  templateUrl: './paginator-configurable-example.html'
})
export class PaginatorConfigurableExample implements OnInit {
  constructor(private paginatorIntl: MatPaginatorIntl) {}

  ngOnInit(): void {
    (this.paginatorIntl as CustomPaginatorIntl).setSomeProperty('自定义内容');
    this.paginatorIntl.changes.next();
  }
}

内容的提问来源于stack exchange，提问作者Enrique