Внедрение стороннего компонента в директиву углового атрибута в угловой библиотеке - PullRequest
Новая
       6

Внедрение стороннего компонента в директиву углового атрибута в угловой библиотеке

0 голосов
/ 27 сентября 2018

Ошибка: NullInjectorError: Нет поставщика для ColumnComponent!

Я создал угловую библиотеку, затем внутри библиотеки я создал директиву атрибута, которая используется основным приложением для привязки данных к свойствам стороннего компонента.

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 { }

Интересно, можем ли мы использовать сторонний компонент внутри директив угловой библиотеки или нет?

1 Ответ

0 голосов
/ 27 сентября 2018

Наконец-то я понял, что да, мы можем.это заняло у меня целую вечность, чтобы настроить его правильно.

ТАК Ответ - да.КАК?

library module.ts очень важен, вам нужно импортировать сторонние модули внутри импорта: [], и когда вы используете его, вы не должны доверять пути подсказки кода Visual Studio.вам нужно настроить его вручную, что сломало мой код: 

import { ColumnComponent } from '@progress/kendo-angular-grid';

, что было 

import { ColumnComponent } from '@progress/kendo-angular-excel-export';

, чтобы подвести итог: 1, да, мы можем использовать третье лицо, также мы можем иметьbindingDirectives Директивы атрибутов AKA внутри угловой библиотеки.Я еще не уверен насчет труб.Я не мог решить проблему с трубами внутри угловой библиотеки.2. не доверяйте пути подсказки вашей IDE при разработке угловой библиотеки,

...