Angular2 - 指令在未在同一模块中声明时不起作用

Question

我有一个指令，我想在多个模块中使用它。在每个模块上声明它会产生错误。因此，我尝试在共享模块中声明它并将该共享模块导入到其他模块。但是，它没有用。它只有在组件自己的模块上准确声明时才有效。

这是我的 SharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GeneralDataService } from './general-data.service';
import {ModalDirective} from '../directives/modal.directive';

    @NgModule({
      imports: [
        CommonModule
      ],
      providers: [GeneralDataService],
      declarations: [ModalDirective]
    })
    export class SharedModule { }

以及我要使用的模块ModalDirective:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './patient.component';
import {SharedModule} from '../shared/shared.module';
@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  providers: [  ],
  declarations: [ MyComponent ]
})
export class MyModule { }

在 MyComponent 组件中：

export class MyComponent implements OnInit, AfterViewInit {

  @ViewChild(ModalDirective) modal: ModalDirective;

  ...
}

modal 在 MyComponent 中是 undefined（即使在 ngAfterViewInit 中）如果 ModalDirective 没有在 MyModule 中声明。任何人都知道如何解决这个问题？

Answer 1

在您的 SharedModule 中，您需要 export ModalDirective

...

@NgModule{(
   ...
   exports: [ModalDirective]
)}
export class SharedModule { ... }

有关共享模块的详细信息，请参阅 docs

Angular2 - 指令在未在同一模块中声明时不起作用

Angular2 - Directive not working when not declared in the same module

angular2-directives

viewchild

angular2-modules

angular