Angular指令无法作用于子组件及孙组件中的输入字段

核心原因 #

Angular组件模板具备封装特性，当你在父组件中引入BlurDirective时，它仅会作用于父组件模板内直接声明的<input>元素。子组件、孙组件的模板属于独立的组件视图，父组件的指令无法自动渗透到嵌套组件的内部模板中。

解决方案 #

1. 嵌套组件显式导入指令（Standalone组件场景）

如果你的项目基于Standalone组件开发，需要在每个包含<input>的子组件、孙组件的@Component装饰器imports数组中添加BlurDirective：

// 子组件示例代码
import { Component } from '@angular/core';
import { BlurDirective } from '../blur.directive';

@Component({
  selector: 'app-child',
  template: `<input type="text" placeholder="子组件输入框">`,
  standalone: true,
  imports: [BlurDirective] // 导入指令
})
export class ChildComponent {}

2. 通过NgModule共享指令（NgModule场景）

若项目使用NgModule架构，先创建一个共享模块封装指令，再在需要的子组件所属模块中导入该共享模块：

// 共享指令模块
import { NgModule } from '@angular/core';
import { BlurDirective } from './blur.directive';

@NgModule({
  declarations: [BlurDirective],
  exports: [BlurDirective] // 导出指令，允许其他模块引用
})
export class DirectivesSharedModule {}

// 子组件所属模块
import { NgModule } from '@angular/core';
import { ChildComponent } from './child.component';
import { DirectivesSharedModule } from '../directives-shared.module';

@NgModule({
  declarations: [ChildComponent],
  imports: [DirectivesSharedModule] // 导入共享模块
})
export class ChildModule {}

3. 全局注册指令（全应用生效场景）

如果希望BlurDirective对所有层级组件的<input>生效，可以在应用根配置中全局注册：

• Angular 16+（Standalone应用）：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { BlurDirective } from './blur.directive';
import { provideDirective } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideDirective(BlurDirective) // 全局注册指令
  ]
};

• 低版本Standalone应用：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { BlurDirective } from './blur.directive';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    {
      provide: 'DIRECTIVES',
      useValue: [BlurDirective],
      multi: true
    }
  ]
};

验证 #

完成配置后，点击嵌套组件中的<input>并失焦，控制台将正常打印blur日志。

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