如何在angular 2的多个模块中使用指令

Question

我在两个模块中声明指令，然后返回错误Type PermissionDirective is part of the declarations of 2 modules我只声明一个模块然后返回错误Can't bind to 'isPermission' since it isn't a known property of 'button' . 这里有什么问题。

请了解我的应用程序结构。

permission.directive.ts

import { Directive, Input } from '@angular/core';
import { TemplateRef, ViewContainerRef } from '@angular/core';
import { LoginInfoService } from '../service/auth.service';

@Directive({ selector: '[isPermission]' })
export class PermissionDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private _auth: LoginInfoService
  ) {
  }
  @Input() set isPermission(_module_action: Array<string>) {
    let permission = this._auth.isPermission(_module_action[0], _module_action[1]);
    if (permission) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

layout.route.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';

const layoutRoutes: Routes = [
   {
      path: '',
      component: LayoutComponent,
      children: [
         {
            path: '',
            loadChildren: () => import('app/dashboard/dashboard.module').then(m => m.DashboardModule),
         },
         {
            path: 'users',
            loadChildren: () => import('app/users/users.module').then(m => m.UsersModule),
         }
      ]
   }
];

export const layoutRouting: ModuleWithProviders = RouterModule.forChild(layoutRoutes);

layout.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PermissionDirective } from 'app/common/directives/permission.directive';

@NgModule({
  imports: [
    CommonModule,
    layoutRouting
  ],
  exports:[],
  declarations: [
    PermissionDirective
  ],
  providers:[]
})
export class LayoutModule { }

仪表板.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
...
import { PermissionDirective } from 'app/common/directives/permission.directive';

@NgModule({
  imports: [
    CommonModule,
    dashboardRouting,
    ....
  ],
  declarations: [
    DashboardComponent,
    PermissionDirective
  ],
  providers: []

})
export class DashboardModule { }

共享模块

import { NgModule, Optional, SkipSelf, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
.........
import { PermissionDirective } from 'app/common/directives/permission.directive';

@NgModule({
  imports:      [ 
    ....
  ],
  declarations: [ 
    ....
    PermissionDirective
  ],
  exports:      [ 
   ...
    PermissionDirective,
    ...
  ],
  providers:    [  
    ...
  ]
})
export class SharedModule { 
  constructor (@Optional() @SkipSelf() parentModule: SharedModule, private dateAdapter:DateAdapter<Date>) {
    if (parentModule) {
      throw new Error(
        'SharedModule is already loaded. Import it in the AppModule only');
    }
    this.dateAdapter.setLocale('en-in'); // DD/MM/YYYY
  }
}

Answer 1

我建议您创建一个导入指令的共享模块，然后您可以像这样将该模块导入到您的模块中

共享模块.ts

@NgModule({
  exports: [PermissionDirective],
  declarations: [PermissionDirective]
})
export class SharedModule {}

然后将 SharedModule 导入您的模块

@NgModule({
  imports: [
    CommonModule,
    dashboardRouting,
    SharedModule
  ],
  declarations: [
    DashboardComponent
  ],
  providers: []

})
export class DashboardModule { }


@NgModule({
  imports: [
    CommonModule,
    layoutRouting,
    SharedModule
  ],
  exports:[],
  declarations: [
  ],
  providers:[]
})
export class LayoutModule { }

Answer 2

在父模块 ie(app.module.ts) 中声明您的指令并导出指令以在整个项目中使用它

@NgModule({
  ....
  export:[PermissionDirective]
})
export class AppModule { }

Answer 3

我删除了共享模块中的一些代码。

import { NgModule, Optional, SkipSelf, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
.........
import { PermissionDirective } from 'app/common/directives/permission.directive';

@NgModule({
  imports:      [ 
    ....
  ],
  declarations: [ 
    ....
    PermissionDirective
  ],
  exports:      [ 
   ...
    PermissionDirective,
    ...
  ],
  providers:    [  
    ...
  ]
})
export class SharedModule { 
// I remove this code
/* 
  constructor (@Optional() @SkipSelf() parentModule: SharedModule, private dateAdapter:DateAdapter<Date>) {
    if (parentModule) {
      throw new Error(
        'SharedModule is already loaded. Import it in the AppModule only');
    }
    this.dateAdapter.setLocale('en-in'); // DD/MM/YYYY
  }
*/
}