在Angular2内扩展PrimeNg组件 [英] Extending a PrimeNg component inside Angular2

问题描述

由于某些用例，我需要在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.我尝试在新类中记录this.isSorted，它确实存在.

我如何扩展这样的内容?

还有更好的解决方案来更改PrimeNg组件的选择器名称(以某种方式包装)吗?

编辑

在调试堆栈中查看了更多内容之后，我发现:

似乎不是直接提供对象，而是提供了包含对象的数组，这是(据我估计)错误的原因.如果我进入源代码并将其更改为dt[0].isSorted()，它将起作用！

如何直接提供对象?

答案

好像我提供了{ provide: DataTable, useExisting: PPDataTable }一样有效.

解决方案

尝试一下我的好朋友:

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./p>

也请检查本教程.

Due to some use cases, I need to extend a PrimeNG component in Angular2. For proofing purpouses, I chose using the DataTable since it is complicated enough.

After literally copy pasting the @Component annotation, I have added:

export class PPDataTable extends DataTable {}

At this point I get the following error: No provider for DataTable. If I add DataTable to the providers array in the annotation, the content of my DataTable is empty.

Therefore I tried adding: { provide: DataTable, useValue: PPDataTable } which yields in some errors such as : TypeError: co.dt.isSorted is not a function. I tried logging this.isSorted in the new class and it does exist.

How do I extend something like this?

Also, got any better solutions to change the selector name of a PrimeNg component ( wrap it somehow ) ?

Edit

After looking some more through the debug stack I found this:

It seems that instead of providing directly the object, I am providing an array containing the object and this is (by my guess) the cause of the error. If I go in the sourcecode and change it to dt[0].isSorted() it works!

How do I provide the object directly?

Answer

Seems that if I provide { provide: DataTable, useExisting: PPDataTable } it works.

解决方案

Try this out my good 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 {
}

We use NG_VALUE_ACCESSOR in order to connect your custom control to ngModel with Control Value Accessor.

Check this tutorial also, could help.

这篇关于在Angular2内扩展PrimeNg组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！