无法在其他 NgModule 中加载 NgModule 的共享指令 [英] Can't load shared directives of a NgModule in other NgModules

问题描述

按照这个讨论，我遇到了同样的问题:我无法导入angular2-materialize 在多个模块中的指令，没有错误消息类型 X 是 2 个模块的声明的一部分"

Following this discussion, where I had the same problem : I couldn't import the directives of angular2-materialize in more than one module, without having the error message "Type X is part of the declarations of 2 modules"

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

I decided to follow the solution given : put the angular2-materialize in its own module, then import the module in my AppModule and my 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 模式的模板:

And to finish, in both module, I simply put a template with a MD modal :

<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>

我认为它肯定会解决我的问题，但没有.

I thought that it would definitely resolve my problem, but no.

我有:

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

就像它从未导入 MaterializeDirective.

like it never imported MaterializeDirective.

我从几个小时以来一直在关注这个问题，它可能来自哪里?

I'm on this issue since hours now, where might it come from ?

编辑

这解决了我的问题:

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

in my MaterializeModule, never forget to export the directives :

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

推荐答案

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

The key here is to use a shared module per the instructions on angular.io. You create the module and import anything you want shared with other modules. To use them, you import the sharedmodule into the module where you need the directives or pipes.

这是我的共享模块:

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 ]
      };
   }
}

由于它是可共享的，所以我在我的所有应用中都使用它.

Since its shareable, I use it all over my app.

这篇关于无法在其他 NgModule 中加载 NgModule 的共享指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！