Angular 16.1独立架构下input选择器的独立指令无法全局生效

方案1：使用实验性API全局注册（推荐Angular 16+） #

Angular 16引入了provideExperimentalZonedDirective()实验性API，可在应用启动时全局注册指令，让所有组件（包括嵌套子组件）的input元素自动应用该指令。

实现步骤： #

1. 在main.ts中导入所需内容：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { RedInput } from './app/red-input.directive';
import { provideExperimentalZonedDirective } from '@angular/core';

2. 启动应用时配置全局提供者：

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonedDirective(RedInput)
  ]
});

注：该API目前为实验性，后续版本可能调整，但16.1.0版本可正常使用。

方案2：创建全局指令集合（无实验性API依赖） #

若不想依赖实验性API，可将全局指令打包成集合，通过根组件导入并导出，让所有子组件自动继承生效范围。

实现步骤： #

1. 创建global-directives.ts文件统一管理全局指令：

import { RedInput } from './red-input.directive';

// 导出全局指令数组
export const GlobalDirectives = [RedInput];

2. 在根组件AppComponent中导入并导出该集合：

import { Component } from '@angular/core';
import { GlobalDirectives } from './global-directives';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [...GlobalDirectives],
  exports: [...GlobalDirectives], // 导出后所有子组件无需重复导入
  template: `<!-- 根组件模板内容 -->`
})
export class AppComponent {}

所有嵌套在根组件下的子组件，其模板内的input元素都会自动应用RedInput指令，无需逐个组件单独导入。

方案3：通过全局令牌注册（进阶方式） #

直接向Angular的DIRECTIVES多提供者令牌中添加自定义指令，从底层实现全局生效。

实现步骤： #

在main.ts的启动配置中添加如下代码：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { RedInput } from './app/red-input.directive';
import { DIRECTIVES } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: DIRECTIVES,
      useValue: [RedInput],
      multi: true // 多提供者模式，避免覆盖Angular自带指令
    }
  ]
});

这种方式会让指令在整个应用的注入环境中生效，覆盖所有组件的对应元素。

内容的提问来源于stack exchange，提问作者XVR-dev