Question

我有一个项目，其中包含几个显示不同信息的材料表-通常在不同的组件中，但偶尔在同一组件中有2个表。

为了提供更好的用户体验，我想在每个表上将“每页项目”更改为“每页XXX”，其中XXX代表数据（例如，每页项目，每页零件数），每页样本数，等等）。

如果您想要一种特定的语言，那么提供自定义MatPaginatorIntl的批准方法可以很好地工作（恕我直言）。似乎没有官方方法来提供针对每个页面的“翻译”，即自定义。

我尝试向我的MatPaginatorIntl扩展器添加功能：

import { MatPaginatorIntl } from '@angular/material'

export class WGMatPaginatorIntl extends MatPaginatorIntl {

    itemsPerPageLabel = "Things per page";

    setLabel(label) {
        this.itemsPerPageLabel = `${label} per page`;
    }
}

...但是后来我不知道如何调用该函数（没有下面的技巧，我确实得到了预期的Things per page。）

我当前正在使用“秘密属性” _intl来访问标签，但是我知道那不是您应该做的：

// This is NOT how you're supposed to do it!
this.paginator._intl.itemsPerPageLabel = "Projects per page";

有人能做到这一点吗？

Answer 1

Paginator的文档说您必须有多个实例-基本上每种items类型都需要一个实现。这是一个示例StackBlitz。

我有两个Paginator实现，苹果和橘子。例如。苹果：

@Injectable({
    providedIn: 'root'
})
export class ApplesPaginatorService implements MatPaginatorIntl {
  changes = new Subject<void>();
  // need these or angular complains. You implement them as you need.
  itemsPerPageLabel: string;
  nextPageLabel: string;
  previousPageLabel: string;
  firstPageLabel: string;
  lastPageLabel: string;
  getRangeLabel = () => '';


  setLabel(label) {
    this.itemsPerPageLabel = `${label} per page:`;
    console.log('Changing to this:', this);
    this.changes.next();
  }
}

然后在我的ApplesComponent中，添加一个提供程序（仅用于该组件的私有实例）：

@Component({
  selector: 'app-apples',
  templateUrl: './apples.component.html',
  styleUrls: ['./apples.component.css'],
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: ApplesPaginatorService,
    }]
  })
export class ApplesComponent implements OnInit {
  constructor(private paginator: MatPaginatorIntl) { }

  what = 'Apples';

  ngOnInit() {
    this.paginator.setLabel(this.what);
  }
}

请注意，我注入了常规的MatPaginatorIntl，但在组件元数据中提供了自定义的ApplesPaginator。

这可能不是唯一的方法，但是它应该可以帮助您入门。

如何使用多个MatPaginatorIntl提供程序？

1 个答案: