如何在Angular独立组件中自动导入依赖指令？

所有组件均为独立组件（standalone）。我有一个表单字段组件（FieldComponent），它依赖一个输入指令（InputDirective）。我希望在导入该组件时，能自动导入对应的指令，无需在导入组件的地方显式声明该指令，类似Angular模块的工作模式，但要在独立组件模式下实现。请问这是否可行？如果可行，该如何实现？

当前代码示例：
父组件（my-app）：

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FieldComponent, InputDirective], // ← 希望从这里移除该指令
  template: `
    <app-field>
      <input type="text" placeholder="Some text">
    </app-field>
  `,
})

FieldComponent：

@Component({
  selector: 'app-field',
  standalone: true,
  imports: [InputDirective],
  template: '<ng-content select="input"></ng-content>',
  styleUrls: ['./field.component.css'],
})

InputDirective：

@Directive({
  selector: 'app-field input',
  standalone: true,
})
export class InputDirective {
  constructor() {
    console.log('Here I am');
  }
}

可行，核心问题在于指令的作用域：你的InputDirective选择器是app-field input，它作用于<app-field>内部的<input>，但这个<input>是父组件模板里的投影内容，不属于FieldComponent的模板，所以FieldComponent的imports里导入指令不会生效——独立组件的imports只对自身模板和直接子组件生效，不对投影进来的内容生效。

有两种常用实现方案：

方案1：通过组件导出关联指令 #

在FieldComponent的配置中添加exports数组，把InputDirective导出。这样任何导入FieldComponent的组件都会自动获得该指令的访问权，无需手动导入：

修改FieldComponent：

@Component({
  selector: 'app-field',
  standalone: true,
  imports: [InputDirective],
  exports: [InputDirective], // 新增导出配置
  template: '<ng-content select="input"></ng-content>',
  styleUrls: ['./field.component.css'],
})

父组件即可移除InputDirective的导入：

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FieldComponent], // 已移除InputDirective
  template: `
    <app-field>
      <input type="text" placeholder="Some text">
    </app-field>
  `,
})

方案2：调整组件结构封装输入元素 #

把<input>放到FieldComponent的模板内，而非使用投影。这样FieldComponent的imports里的指令就能直接生效，父组件完全无需关心指令的存在：

修改FieldComponent：

@Component({
  selector: 'app-field',
  standalone: true,
  imports: [InputDirective],
  template: '<input type="text" [placeholder]="placeholder">',
  styleUrls: ['./field.component.css'],
})
export class FieldComponent {
  @Input() placeholder = ''; // 通过输入属性传递配置
}

父组件使用方式：

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, FieldComponent],
  template: '<app-field placeholder="Some text"></app-field>',
})

这种方式更符合组件封装原则，父组件不需要知晓内部的输入元素和指令细节。

Angular独立组件的imports是组件模板的私有依赖，仅对自身模板和直接子组件生效；投影内容（ng-content）属于父组件模板，因此父组件必须能访问到作用于投影内容的指令。通过exports导出指令，相当于把组件变成一个“依赖容器”，导入组件时自动带上导出的依赖，逻辑和NgModule的exports一致。

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