在 angular 库中的 angular 属性指令中注入第 3 方组件
Injecting 3rd party component inside angular attribute directive in angular library
错误:
NullInjectorError:没有 ColumnComponent 的提供者!
我创建了一个 angular 库,然后在库中我创建了一个属性指令,主应用使用它来将数据绑定到第 3 方组件的属性。
src/app/client.component.html
<kendo-grid-column field="id" fcidColumnBinding>
</kendo-grid-column>
这是我在图书馆方面的资料:
projects/metadata-lib/src/lib/column-binding-directive.ts
@Directive({
selector: '[fcidColumnBinding]'
})
export class ColumnBindingDirective {
constructor(private metadataLibService: MetadataLibService, private gridColumn: ColumnComponent) { }
public ngOnInit(): void {
//Called after the constructor, initializing input properties, and the first call to ngOnChanges.
//Add 'implements OnInit' to the class.
this.metadataLibService.subscribe((result) => {
this.gridColumn.title = this.metadataLibService.getUIHint(result, this.gridColumn.field, 'DisplayName');
this.gridColumn.width = this.metadataLibService.getUIHint(result, this.gridColumn.field, 'columnWidth');
})
this.rebind();
}
public rebind(): void {
this.metadataLibService.query();
}
}
project/src/lib/metadata-lib.module.ts
import { NgModule } from '@angular/core';
import { MetadataLibComponent } from './metadata-lib.component';
import { MetadataBinidingDirective } from './metadata-biniding.directive';
import { ColumnBindingDirective } from './column-binding.directive';
import { CommonModule } from '@angular/common';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { GridModule } from '@progress/kendo-angular-grid';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { ColumnHeaderControlComponent } from './column-header-control/column-header-control.component';
import { ForeignkeyFieldControlComponent } from './foreignkey-field-control/foreignkey-field-control.component';
import { IconFieldControlComponent } from './icon-field-control/icon-field-control.component';
import { ImageFieldControlComponent } from './image-field-control/image-field-control.component';
import { CheckboxFilterControlComponent } from './checkbox-filter-control/checkbox-filter-control.component';
import { DropdownFilterControlComponent } from './dropdown-filter-control/dropdown-filter-control.component';
import { SwitchFilterControlComponent } from './switch-filter-control/switch-filter-control.component';
@NgModule({
imports: [
CommonModule,
DropDownsModule,
GridModule,
ButtonsModule,
InputsModule
],
declarations: [
MetadataLibComponent,
MetadataBinidingDirective,
ColumnBindingDirective,
ColumnHeaderControlComponent,
ForeignkeyFieldControlComponent,
IconFieldControlComponent,
ImageFieldControlComponent,
CheckboxFilterControlComponent,
DropdownFilterControlComponent,
SwitchFilterControlComponent,
],
exports: [
MetadataLibComponent,
MetadataBinidingDirective,
ColumnBindingDirective,
ColumnHeaderControlComponent,
ForeignkeyFieldControlComponent,
IconFieldControlComponent,
ImageFieldControlComponent,
CheckboxFilterControlComponent,
DropdownFilterControlComponent,
SwitchFilterControlComponent,
]
})
export class MetadataLibModule { }
我想知道我们能否在 angular 库指令中使用第 3 方组件?
最后我想,是的,我们可以。
我花了很长时间才正确配置它。
所以答案是肯定的。如何?
库 module.ts 非常关键,您需要在 import:[] 中导入第 3 方模块,并且无论何时使用它,您都不应该相信 visual studio 代码建议路径。你需要手动设置它是什么破坏了我的代码
这个
import { ColumnComponent } from '@progress/kendo-angular-grid';
这是
import { ColumnComponent } from '@progress/kendo-angular-excel-export';
总结一下:
1,是的,我们可以使用第 3 方,我们也可以在 angular 库中使用 bindingDirectives AKA 属性指令。我还不确定管道。我无法解决 angular 库中管道的问题。
2. 在开发 angular 库时,不要相信 IDE 的建议路径,
错误: NullInjectorError:没有 ColumnComponent 的提供者!
我创建了一个 angular 库,然后在库中我创建了一个属性指令,主应用使用它来将数据绑定到第 3 方组件的属性。
src/app/client.component.html
<kendo-grid-column field="id" fcidColumnBinding>
</kendo-grid-column>
这是我在图书馆方面的资料: projects/metadata-lib/src/lib/column-binding-directive.ts
@Directive({
selector: '[fcidColumnBinding]'
})
export class ColumnBindingDirective {
constructor(private metadataLibService: MetadataLibService, private gridColumn: ColumnComponent) { }
public ngOnInit(): void {
//Called after the constructor, initializing input properties, and the first call to ngOnChanges.
//Add 'implements OnInit' to the class.
this.metadataLibService.subscribe((result) => {
this.gridColumn.title = this.metadataLibService.getUIHint(result, this.gridColumn.field, 'DisplayName');
this.gridColumn.width = this.metadataLibService.getUIHint(result, this.gridColumn.field, 'columnWidth');
})
this.rebind();
}
public rebind(): void {
this.metadataLibService.query();
}
}
project/src/lib/metadata-lib.module.ts
import { NgModule } from '@angular/core';
import { MetadataLibComponent } from './metadata-lib.component';
import { MetadataBinidingDirective } from './metadata-biniding.directive';
import { ColumnBindingDirective } from './column-binding.directive';
import { CommonModule } from '@angular/common';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { GridModule } from '@progress/kendo-angular-grid';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { ColumnHeaderControlComponent } from './column-header-control/column-header-control.component';
import { ForeignkeyFieldControlComponent } from './foreignkey-field-control/foreignkey-field-control.component';
import { IconFieldControlComponent } from './icon-field-control/icon-field-control.component';
import { ImageFieldControlComponent } from './image-field-control/image-field-control.component';
import { CheckboxFilterControlComponent } from './checkbox-filter-control/checkbox-filter-control.component';
import { DropdownFilterControlComponent } from './dropdown-filter-control/dropdown-filter-control.component';
import { SwitchFilterControlComponent } from './switch-filter-control/switch-filter-control.component';
@NgModule({
imports: [
CommonModule,
DropDownsModule,
GridModule,
ButtonsModule,
InputsModule
],
declarations: [
MetadataLibComponent,
MetadataBinidingDirective,
ColumnBindingDirective,
ColumnHeaderControlComponent,
ForeignkeyFieldControlComponent,
IconFieldControlComponent,
ImageFieldControlComponent,
CheckboxFilterControlComponent,
DropdownFilterControlComponent,
SwitchFilterControlComponent,
],
exports: [
MetadataLibComponent,
MetadataBinidingDirective,
ColumnBindingDirective,
ColumnHeaderControlComponent,
ForeignkeyFieldControlComponent,
IconFieldControlComponent,
ImageFieldControlComponent,
CheckboxFilterControlComponent,
DropdownFilterControlComponent,
SwitchFilterControlComponent,
]
})
export class MetadataLibModule { }
我想知道我们能否在 angular 库指令中使用第 3 方组件?
最后我想,是的,我们可以。 我花了很长时间才正确配置它。
所以答案是肯定的。如何?
库 module.ts 非常关键,您需要在 import:[] 中导入第 3 方模块,并且无论何时使用它,您都不应该相信 visual studio 代码建议路径。你需要手动设置它是什么破坏了我的代码 这个
import { ColumnComponent } from '@progress/kendo-angular-grid';
这是
import { ColumnComponent } from '@progress/kendo-angular-excel-export';
总结一下: 1,是的,我们可以使用第 3 方,我们也可以在 angular 库中使用 bindingDirectives AKA 属性指令。我还不确定管道。我无法解决 angular 库中管道的问题。 2. 在开发 angular 库时,不要相信 IDE 的建议路径,