Angular 7-将指令从功能模块应用到从共享模块导入的组件

时间:2019-03-25 14:30:23

标签: angular2-directives

我在应用程序的共享模块中设置了一个组件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只匹配此模块声明的或此模块导入的模块导出的类的选择器和管道名称”,这似乎告诉我我想要的结果不会发生。

除了将指令移至共享模块之外,还有其他方法可以做到这一点吗?

0 个答案:

没有答案