如何在独立指令中导入模块？@Directive无imports属性的替代方案

在Angular里，独立指令确实没法像独立组件那样用imports属性导入模块，但有几种替代方案能满足需求：

• 直接注入依赖实例
  如果需要用到模块里的服务、管道等，不必导入整个模块，直接在指令的构造函数中注入对应的依赖即可。比如要用到DatePipe，直接注入：

  constructor(private datePipe: DatePipe) {
    // 使用datePipe处理日期
  }
  

  前提是这个依赖是全局提供的（比如providedIn: 'root'），或者已经在指令的注入环境中可用。

• 通过importProvidersFrom导入模块提供者
  如果模块包含你需要的服务提供者，可以在指令的providers或viewProviders数组里用importProvidersFrom()方法导入模块的提供者，这样模块里的服务就能在指令中注入使用：

  import { Directive } from '@angular/core';
  import { importProvidersFrom } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  @Directive({
    selector: '[myStandaloneDirective]',
    standalone: true,
    providers: [
      importProvidersFrom(CommonModule)
    ]
  })
  export class MyStandaloneDirective {
    constructor(private datePipe: DatePipe) {}
  }
  

• 在使用指令的组件中导入模块
  如果你的指令需要用到模板相关的指令（比如NgIf、NgFor）或者管道，而这些是某个模块的成员，可以在使用该指令的独立组件的imports数组中导入对应的模块。这样当组件模板中使用你的指令时，就能直接访问模块里的这些功能：

  @Component({
    selector: 'app-my-component',
    standalone: true,
    imports: [CommonModule, MyStandaloneDirective], // 导入CommonModule
    template: `
      <div myStandaloneDirective *ngIf="showContent">
        {{ someDate | date }}
      </div>
    `
  })
  export class MyComponent {
    showContent = true;
    someDate = new Date();
  }
  

内容的提问来源于stack exchange，提问作者Matthieu Riegler