Как использовать директиву в более чем одном модуле в углу 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 { }

dashboard.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 { }

SharedModule

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

Я бы порекомендовал вам создать общий модуль, который импортирует директиву, затем вы можете импортировать этот модуль в свой модуль, как это

shared.module.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

Я удаляю некоторый код в общем модуле.

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
  }
*/
}

Answer 3

Объявите вашу Директиву в родительском модуле, т.е.