Angular 4 : How to inject directives declared in bootstrapped module(appmodule) in other modules that are imported in the appmodule?

Question

我已经创建了一个类似于 Angular 文档中的突出显示指令，但是我无法在 appmodule 中导入的其他模块中使用它。以下是我的 appmodule.ts 文件:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { PrimaryNavigationComponent } from './components/primary-navigation/primary-navigation.component';

import { DashboardModule } from 'app/features/dashboard/dashboard.module';
import { ServicesModule } from 'app/features/services/services.module';
import { NotificationsModule } from 'app/features/notifications/notifications.module';
import { AboutModule } from 'app/features/about/about.module';
import { RedirectModule } from 'app/features/redirect/redirect.module';
import { HighlightDirective } from 'app/directives/highlight/highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    PrimaryNavigationComponent,
    HighlightDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    DashboardModule,
    ServicesModule,
    NotificationsModule,
    AboutModule,
    RedirectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮我解决这个问题。

Answer 1

Angular 模块系统乍一看可能会令人困惑，但一旦习惯了它就会非常简单。

有一些简单的规则需要遵循:

1. 每个组件/指令/管道(即您在模板中使用的项目，也称为可声明项)必须在一个且仅一个模块中声明(对您来说不是问题)
2. 如果您在模块中声明一个名为 X 的组件/指令/管道，则同一模块中的任何其他组件/指令/管道都可以在其自己的模板中使用 X(这对您来说也不是问题)
3. 如果您想在其他模块 N 中使用在模块 M 中声明的名为 X 的组件/指令/管道，则:
   • X 必须从模块 M 导出
   • 模块 N 必须导入模块 M

这就是你错了 - 你必须从声明它的模块中导出你的HighlightDirective，以使其可以在其他模块中使用。

但是，就您而言，您的 AppModule 已经依赖于您的功能模块(您将功能模块(例如 DashboardModule、ServicesModule 等)导入您的 AppModule)。 Angular 不喜欢循环引用，因此您不能让 AppModule 导入功能模块，然后让该功能模块反过来并尝试导入 AppModule。

因此，解决您问题的总体解决方案是将您想要跨多个模块使用的可声明项(组件/指令/管道)移动到新模块(例如 SharedModule)中，从该 SharedModule 导出这些可声明项，然后让您的 AppModule并且功能模块导入 SharedModule。