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

问题描述

继讨论后，我遇到了同样的问题:我无法导入angular2-的指令在多个模块中实现，而没有错误消息"Type 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上的说明使用共享模块.您创建模块并导入要与其他模块共享的任何内容.要使用它们，请将共享模块导入需要指令或管道的模块中.

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