angular - 在 Angular2 中扩展 PrimeNg 组件

Question

由于某些用例，我需要在 Angular2 中扩展一个 PrimeNG 组件。出于校对目的，我选择使用 DataTable，因为它足够复杂。

在字面上复制粘贴 @Component 注释后，我添加了:

export class PPDataTable extends DataTable {}

此时我收到以下错误:DataTable 没有提供者。如果我将 DataTable 添加到注释中的 providers 数组，我的 DataTable 的内容为空。

因此我尝试添加:{ provide: DataTable, useValue: PPDataTable } 这会产生一些错误，例如:TypeError: co.dt.isSorted is not a function .我尝试在新类中记录 this.isSorted，它确实存在。

我该如何扩展这样的东西？

此外，是否有任何更好的解决方案来更改 PrimeNg 组件的选择器名称(以某种方式包装它)？

编辑

通过调试堆栈查看更多内容后，我发现了这个:

似乎我没有直接提供对象，而是提供了一个包含对象的数组，这(据我猜测)是错误的原因。如果我进入源代码并将其更改为 dt[0].isSorted() 它会起作用!

如何直接提供对象？

回答

似乎如果我提供 { provide: DataTable, useExisting: PPDataTable } 就可以了。

Answer 1

试试这个我的好 friend :

import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { PrimeNgClassToExtend } from 'path';

const DATATABLE_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyClassThatIsExtending),
    multi: true
};

@Component({
    selector: 'my-class-extending',
    providers: [DATATABLE_VALUE_ACCESSOR],
    template: ``
})
export class MyClassThatIsExtending extends PrimeNgClassToExtend {
}

我们使用 NG_VALUE_ACCESSOR以便使用控件值访问器将您的自定义控件连接到 ngModel。

检查 this tutorial也可以提供帮助。