无法在其他 NgModule 中加载 NgModule 的共享指令

Question

在这个 discussion 之后，我遇到了同样的问题：我无法在多个模块中导入 angular2-materialize 的指令，没有出现错误消息 "Type X is part of the declarations of 2 modules"

我决定遵循给出的解决方案：将 angular2-materialize 放入它自己的模块中，然后将模块导入我的 AppModule 和我的 ChildrenModule。

所以我的 MaterializeModule :

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

// Import Materialize CSS + Directives, like indicated in the readme 
// https://github.com/InfomediaLtd/angular2-materialize
import 'materialize-css';
import 'angular2-materialize';

import { MaterializeDirective } from 'angular2-materialize';

@NgModule({
    declarations: [ MaterializeDirective ]
})
export class MaterializeModule {
}

我的 AppModule :

import { MaterializeModule } from './shared/materialize.module';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NoContentComponent
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterializeModule,
    RouterModule.forRoot(ROUTES, { useHash: false })
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS
  ]
})
export class AppModule {}

还有我的 ChildrenModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Import shared modules
import { MaterializeModule } from '../shared/materialize.module';

// Import child routes
import { detailsRouting } from './details.routing';

// Import app modules
import { DetailsComponent} from './details.component';

@NgModule({
    imports: [
        BrowserModule,
        MaterializeModule,
        detailsRouting
    ],
    declarations: [
        DetailsComponent
    ]
})
export class ChildrenModule { } //

最后，在这两个模块中，我简单地放置了一个带有 MD 模态的模板：

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger blue" href="#missionAccept">
                <i class="material-icons left">check</i>Accepter
            </a>

我以为它一定会解决我的问题，但是没有。

我有：

can't bind to 'materializeParams' since it isn't a known property of 'a'

好像它从未导入 MaterializeDirective。

我几个小时以来一直在处理这个问题，它可能来自哪里？

编辑

这解决了我的问题：

在我的 MaterializeModule 中，永远不要忘记导出指令：

@NgModule({
    ...
    exports: [ MaterializeDirective ]
})

Answer 1

此处的关键是根据 angular.io 上的说明使用共享模块。您创建模块并导入任何您想要与其他模块共享的内容。要使用它们，您需要将共享模块导入到需要指令或管道的模块中。

这是我的共享模块：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { AuthorizationService } from '../services/authorization.service';
import { LoginService } from '../services/login.service';
import { RegisterService } from '../services/register.service';
import { ValidationService } from '../services/validation.service';
import { AppMenuService } from '../services/appMenu.service';
import { AuthGuardService } from '../services/authGuard.service';
import {InputTextModule, GalleriaModule, MenubarModule } from 'primeng/primeng'

@NgModule({
   imports: [ CommonModule, RouterModule, HttpModule, MenubarModule, 
              GalleriaModule, InputTextModule ],
   declarations: [ ], 
   exports:  [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, 
               MenubarModule, GalleriaModule, InputTextModule ] 
})

export class SharedModule {
  static forRoot(): ModuleWithProviders {
  return {
     ngModule: SharedModule,
     providers: [ AppMenuService, AuthorizationService, LoginService, 
                  RegisterService, ValidationService, AuthGuardService ]
      };
   }
}

因为它是可共享的，所以我在我的所有应用程序中都使用它。

无法在其他 NgModule 中加载 NgModule 的共享指令

Can't load shared directives of a NgModule in other NgModules

module

angular2-directives

angular