Angular 15指令行为异常：如何恢复Angular 14的原有效果？

在Angular 14中，自定义指令[myDirective]只会作用于带有该属性的第二个<input>，行为正常。升级到Angular 15后，为适配独立组件模式添加了standalone: true和组件的hostDirectives配置，结果两个<input>都被该指令影响，需要恢复到Angular 14时的原有效果。

问题原因 #

你添加的hostDirectives配置是把指令应用到组件的宿主元素（即<app-datepicker-field>标签本身），而非组件模板内部的元素。这会导致整个组件宿主携带该指令的提供者配置，使得内部所有依赖MAT_DATE_FORMATS的元素都受到影响，从而打破了原有的选择器匹配逻辑。

解决方案 #

要恢复原有行为，只需调整组件配置：

• 移除组件的hostDirectives数组
• 在组件的imports数组中导入独立指令CustomDateFormatDirective，让模板内的选择器能正常匹配目标元素

修正后的代码 #

指令代码

// 假设yearFormat是已定义的日期格式配置
const yearFormat = ...;

@Directive({
  standalone: true,
  selector: '[myDirective]',
  providers: [{ provide: MAT_DATE_FORMATS, useValue: yearFormat }]
})
export class CustomDateFormatDirective {}

组件代码

@Component({
  selector: 'app-datepicker-field',
  template: `
     <input>no directive</input>
     <input myDirective>with directive</input>
    `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  // 移除hostDirectives，添加imports导入指令
  imports: [CustomDateFormatDirective]
})
export class MyDatePickerComponent {}

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