重写库组件的实现

Question

问题（Angular 14）

我想覆盖库组件（Angular Material）中的函数，而不需要重新实现整个组件。

想法

我的想法受到MatPaginator文档中的

示例

之一的启发。

它们覆盖

getRangeLabel

中

MatPaginatorIntl

函数的默认实现，然后使用

providers

字段在组件中提供新的实现：

@Injectable()
export class MyCustomPaginatorIntl implements MatPaginatorIntl {
  getRangeLabel(page: number, pageSize: number, length: number): string {
    if (length === 0) {
      return $localize`Page 1 of 1`;
    }
    const amountPages = Math.ceil(length / pageSize);
    return $localize`Page ${page + 1} of ${amountPages}`;
  }
}

@Component({
  providers: [{provide: MatPaginatorIntl, useClass: MyCustomPaginatorIntl}],
})
export class PaginatorIntlExample {}

我自然想知道我是否可以对

MatPaginator

组件本身做同样的事情：

@Injectable()
export class MyCustomPaginatorComponent extends MatPaginator {
  override hasNextPage(): boolean {
    return true;
  }
}

@Component({
  providers: [{provide: MatPaginator , useClass: MyCustomPaginatorComponent}],
})
export class PaginatorIntlExample {}

但这行不通。

类似主题

我理解，

MatPaginatorIntl

直接注入到

MatPaginator

的构造函数中，而

MatPaginator

不是

Injectable

本身，而是一个

Component

。但我想知道是否有任何方法可以从 MatPaginator

覆盖函数

，而无需重新实现模板。

我发现了一个类似的问题，但我想扩展

MatPaginator

的行为，而不是使用相同的选择器重新实现整个新组件。

在另一篇文章中，他们正在使用 MatPaginator

 访问 

ViewChild

，但我想避免这种方法，因为我需要在通用组件中使用它，该组件大多数时候使用默认值 

MatPaginator

，但在特殊情况下使用自定义实施。

可能最好的解决方案是使用

内容投影，但随后我需要更改使用此通用组件的所有现有组件，并且由于这是一种特殊情况，因此也没有多大意义。

TL;博士;

我只想为一个模块覆盖

MatPaginator

 中的函数。我怎样才能做到这一点？

Answer 1

“覆盖”的一种方法是创建指令。指令使一个“HTML 标签”成为“超级标签”。

当您要在 mat-paginator 中应用此指令时，您可以使用构造函数来获取它：

@Host

@Directive({
  selector:'[super-paginator]',
  standalone:true,
  
})
export class SuperDirective
{
  constructor(@Host() paginator:MatPaginator)
  {
      paginator.hasNextPage=(): boolean=>{
        return true;
      }
  }
}

并使用

<mat-paginator super-paginator [length]="100" ....></mat-paginator> 注意：不要忘记导入指令

参见

stackblitz