在Angular2中扩展PrimeNg组件

Question

由于一些用例，我需要扩展Angular2中的PrimeNG组件。为了证明purpouses，我选择使用DataTable，因为它足够复杂。

在逐字复制粘贴@Component注释后，我添加了：

export class PPDataTable extends DataTable {}

此时我收到以下错误：No provider for 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

试试我的好朋友：

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，可能会有帮助。