时间戳

首页 > 解决方案 > 在角度库中的角度属性指令中注入第 3 方组件

angularjs - 在角度库中的角度属性指令中注入第 3 方组件

问题描述

错误：NullInjectorError：ColumnComponent 没有提供程序！

我创建了一个角度库，然后在库中创建了一个属性指令，主应用程序使用该指令将数据绑定到第 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();
  }
}

项目/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 { }

我想知道我们是否可以在角度库指令中使用 3rd 方组件？

标签： angularjsangularjs-directiveangular-library

解决方案

最后我想，是的，我们可以。我花了很长时间才正确配置它。

所以答案是肯定的。如何？

库 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 属性指令。我还不确定管道。我无法解决角度库内的管道问题。2. 在开发 Angular 库时不要相信 IDE 的建议路径，

推荐阅读