Angular 7 - применять директивы из функционального модуля к компонентам, импортированным из общего модуля - PullRequest
Новая
       25

Angular 7 - применять директивы из функционального модуля к компонентам, импортированным из общего модуля

0 голосов
/ 25 марта 2019

Я настроил компонент CCheckboxComponent в общем модуле нашего приложения, который оборачивает флажок, а затем использует этот компонент в других функциональных модулях приложения. Здесь нет проблем. 

shared.module.ts : 

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    SharedRoutingModule,
    TooltipModule,
    FormsModule,
    ReactiveFormsModule,
    InputsModule,
    SortableModule
  ],
  exports: [CCheckboxComponent],
  declarations: [CCheckboxComponent]

})
export class SharedModule { }

Однако в одном из этих функциональных модулей у меня есть директива, которую я хочу применить к этому компоненту, например: 

@Directive({
  selector: 'input[type=text],textarea,input[type=checkbox],input[type=radio]',
})
export class ScrollToElementDirective implements OnInit {

  constructor(private element : ElementRef,
              private fieldRegister : ScrollToFieldRegisterService,
              private cdr : ChangeDetectorRef) { }

  @Input() name : string;

  @HostListener('focus')
  public handleFocus() {
    //handle focus and scroll element into view
  }

  ngOnInit() {
   //directive does not attach to my checkbox components from shared module
  }
}

А мой функциональный модуль объявлен так: 

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    CoreModule,
    NgxUiLoaderModule,
    InputsModule,
    DropDownsModule,
    DateInputsModule,
    UploadModule
  ],
  entryComponents:[],

  declarations: [
//bunch of declarations
],

  exports:[
//bunch of exports here
  ]
})
export class FilingModule { }

Я хочу, чтобы директива прикреплялась к моим компонентам флажков, когда я использую их в компоненте объектов, чтобы я мог прослушивать событие фокуса на них. Однако, если я правильно читаю документацию здесь: https://angular.io/guide/ngmodule-faq, то «Angular сопоставляет только селекторы и имена каналов для классов, которые объявлены этим модулем или экспортированы модулем, который импортирует этот модуль», что, кажется, говорит мне что мой желаемый результат не произойдет.

Есть ли другой способ сделать это, если просто переместить директиву в общий модуль?

...