在 Angular2 中扩展 PrimeNg 组件

Question

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

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

export class PPDataTable extends DataTable {}

此时我得到以下错误：No provider for DataTable。如果我在注解中的providers数组中添加DataTable，我的DataTable的内容是空的。

因此我尝试添加：{ provide: DataTable, useValue: PPDataTable } 这会产生一些错误，例如：TypeError: co.dt.isSorted is not a function。我尝试在新 class 中记录 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，可能会有帮助。

在 Angular2 中扩展 PrimeNg 组件

Extending a PrimeNg component inside Angular2

angular

primeng