如何在 Angular 的多个模块中使用指令？

Question

• 创建了一个指令 uppercase-input.directive.ts
• 并尝试在多个组件中导入/使用它，但出现以下错误
• 刚刚在这里发布了一个文件（organization.module.ts），还有一些我使用大写指令的地方

错误：src/app/core/directives/uppercase-input.directive.ts:8:14 - 错误 NG6007：指令“UppercaseInputDirective”由多个 NgModule 声明。 8 导出类UppercaseInputDirective { ~~~~~~~~~~~~~~~~~~~~~~~~ × 编译失败。

这是我的代码:.

大写输入.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
  selector: '[uppercase]',
  host: {
    '(input)': '$event'
  }
})
export class UppercaseInputDirective {

  lastValue!: string;

  constructor(public ref: ElementRef) { }

  @HostListener('input', ['$event']) onInput($event:any) 
  {
    var start = $event.target.selectionStart;
    var end = $event.target.selectionEnd;
    $event.target.value = $event.target.value.toUpperCase();
    $event.target.setSelectionRange(start, end);
    $event.preventDefault();

    if (!this.lastValue || (this.lastValue && $event.target.value.length > 0 && this.lastValue !== $event.target.value)) {
      this.lastValue = this.ref.nativeElement.value = $event.target.value;
      // Propagation
      const evt = document.createEvent('HTMLEvents');
      evt.initEvent('input', false, true);
      event?.target?.dispatchEvent(evt);
    }
  }
}

组织.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { OrganizationRegisterRoutingModule } from './organization-register-routing.module';
import { OrganizationRegisterComponent } from './organization-register.component';
import { AddOrganizationComponent } from './add-organization/add-organization.component';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import {MatIconModule} from '@angular/material/icon';
import {MatMenuModule} from '@angular/material/menu';
import { GlobalTableComponent } from 'src/app/shared/global-table/global-table.component';
import {MatTooltipModule} from '@angular/material/tooltip';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { UppercaseInputDirective } from 'src/app/core/directives/uppercase-input.directive';



@NgModule({
  declarations: [
    OrganizationRegisterComponent,
    AddOrganizationComponent,
    UppercaseInputDirective
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CommonModule,
    OrganizationRegisterRoutingModule,
    MatCardModule,
    MatButtonModule,
    MatDialogModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatMenuModule,
    GlobalTableComponent,
    MatTooltipModule
  ]
})
export class OrganizationRegisterModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from './core/core.module';
import { HttpClientModule } from '@angular/common/http';
import {MatTooltipModule} from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { NgxSpinnerModule } from 'ngx-spinner';
import { MatDialogModule } from '@angular/material/dialog';
import { DatePipe } from '@angular/common';
// import { UnitRegistrationComponent } from './modules/procurement/masters/unit-registration/unit-registration.component';

@NgModule({
  declarations: [
    AppComponent,
    // UnitRegistrationComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatSnackBarModule,
    MatTooltipModule,
    NgxSpinnerModule,
    MatDialogModule
  ],
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

导出这个指令不就可以解决问题了吗？

尝试添加：

exports: [UppercaseInputDirective]

进入您的组织模块装饰器

Answer 2

您不应该将指令直接导入到使用它的组件中。相反，首先为指令创建一个模块并将指令导入到模块中，如下所示：

import {
  CommonModule
} from '@angular/common';
import {
  NgModule
} from '@angular/core';

import {
  UppercaseInputDirective 
} from './uppercase-input.directive.ts';

@NgModule({
  declarations: [UppercaseInputDirective],
  imports: [CommonModule],
  exports: [UppercaseInputDirective],
})
export class UppercaseInputDirectiveModule {}

然后，将指令的模块导入到您希望使用该指令的组件的模块中，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UppercaseInputDirective } from '/path-to-your-directive-module'


@NgModule({
  declarations: [
    OrganizationRegisterComponent,
    AddOrganizationComponent,
    // do NOT add the directive or module as a declaration here
  ],
  imports: [
    // ... other imports
    UppercaseInputDirective
  ]
})
export class OrganizationRegisterModule { }