Angular 4:如何在appmodule中导入的其他模块中注入bootstrapped模块(appmodule)中声明的指令？

Question

我已经创建了一个类似于角度文档中的hightlight指令但是,我无法在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的组件/指令/管道,则:
   • 必须从模块M导出X.
   • 模块N必须导入模块M.

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

但是,在您的情况下,您的AppModule已经依赖于您的功能模块(您将功能模块,例如DashboardModule,ServicesModule等导入AppModule).Angular不喜欢循环引用,因此您无法让AppModule导入功能模块,然后让该功能模块转向并尝试导入AppModule.

因此,您的问题的整体解决方案是将要在多个模块中使用的声明(组件/指令/管道)移动到新模块(例如SharedModule),从该SharedModule导出这些声明,然后使用您的AppModule和功能模块导入SharedModule.