如何在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
  }
*/
}