为什么放在dialog内的Angular自定义指令无法正常生效？

• 执行时机错误：如果样式赋值逻辑写在constructor或ngOnInit钩子中，弹窗的动态渲染特性会导致此时宿主元素未完全挂载，或@Input参数还未完成传值，赋值操作直接失效。
• 宿主元素引用错误：你代码中使用的this.formSelector.nativeElement不是正确的宿主元素引用方式，自定义指令要操作自身挂载的元素，必须通过依赖注入ElementRef获取，你当前的引用大概率指向了不相关的元素。
• 样式被覆盖：弹窗自带的.modal-title类可能设置了背景色，优先级高于你添加的行内样式，导致设置被覆盖。
• 作用域未导入：如果弹窗是独立组件或归属于单独的模块，没有将指令导入到弹窗所属的作用域时，指令本身就不会执行。

1. 修正指令的基础逻辑，调整执行时机和元素引用：

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[highlightThis]'
})
export class HighlightThisDirective implements AfterViewInit {
  @Input() count!: number;
  @Input() highlightColor!: string;

  // 注入ElementRef获取指令挂载的宿主元素
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    if (this.highlightColor) {
      console.log("highlightColor", this.highlightColor);
      this.el.nativeElement.style.backgroundColor = this.highlightColor;
    }
  }
}

2. 确认指令导入范围：如果弹窗是独立组件，需要在弹窗组件的@Component配置的imports数组中加入HighlightThisDirective；如果弹窗属于功能模块，需要在对应模块的declarations或imports中引入指令（指令在共享模块导出的话直接导入共享模块即可）。
3. 解决样式覆盖问题：打开浏览器元素面板，检查目标h4元素的样式，如果设置的background-color存在但被划掉，说明被更高优先级样式覆盖，修改赋值逻辑提高优先级即可：

this.el.nativeElement.style.setProperty('background-color', this.highlightColor, 'important');

4. 适配延迟渲染场景：如果弹窗内容带*ngIf之类的延迟渲染逻辑，可以改为监听@Input参数变化触发赋值：

@Input() set highlightColor(color: string) {
  if (color) {
    this.el?.nativeElement?.style.setProperty('background-color', color, 'important');
  }
}

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