Angular中*ngIf致自定义指令失效的合理解决方案咨询

在使用*ngIf切换component1-in-spotlight和component2-in-spotlight组件时，自定义焦点切换指令出现热键生效但焦点不符合预期、无日志输出的异常，移除*ngIf或隐藏未使用组件后问题消失。以下是替代[hidden]的可行解决方案：

方案一：动态创建组件（推荐） #

通过ViewContainerRef和ComponentFactoryResolver动态创建当前模式对应的组件，完全控制组件生命周期，避免*ngIf销毁重建导致的指令状态混乱，同时DOM中仅存在当前模式的组件，符合你的需求。

父组件HTML： #

<div>
  <div>
    <div>
      <div #componentContainer></div>
    </div>
  </div>
</div>

父组件TS： #

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnChanges, SimpleChanges } from '@angular/core';
import { Component1InSpotlightComponent } from './component1-in-spotlight.component';
import { Component2InSpotlightComponent } from './component2-in-spotlight.component';
import { OptionOne, OptionTwo, MyEnumType } from './your-enum-path';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnChanges {
  @Input() mode: MyEnumType;
  @ViewChild('componentContainer', { read: ViewContainerRef, static: false }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['mode']?.currentValue !== changes['mode']?.previousValue) {
      this.container.clear(); // 清除上一个组件实例
      let componentFactory;

      switch (this.mode) {
        case OptionOne:
          componentFactory = this.resolver.resolveComponentFactory(Component1InSpotlightComponent);
          break;
        case OptionTwo:
          componentFactory = this.resolver.resolveComponentFactory(Component2InSpotlightComponent);
          break;
        default:
          return;
      }

      const componentRef = this.container.createComponent(componentFactory);
      // 若需传递输入属性，可通过componentRef.instance设置：
      // componentRef.instance.someInput = yourValue;
    }
  }
}

注意：Angular 9+启用Ivy后无需手动添加entryComponents，但如果项目未使用Ivy，需在模块的entryComponents数组中加入这两个组件。

方案二：修复自定义焦点指令的生命周期逻辑 #

问题大概率源于指令未在组件销毁时清理监听，或未在组件初始化完成后正确触发焦点逻辑。修改指令的生命周期钩子，确保事件监听的注册与解绑时机正确：

自定义焦点指令TS： #

import { Directive, ElementRef, OnInit, OnDestroy, NgZone } from '@angular/core';

@Directive({
  selector: '[appCustomFocusSwitch]' // 替换为你的指令选择器
})
export class CustomFocusSwitchDirective implements OnInit, OnDestroy {
  private keyDownListener: (event: KeyboardEvent) => void;

  constructor(private el: ElementRef, private zone: NgZone) {}

  ngOnInit(): void {
    // 在NgZone外注册监听，避免频繁触发变更检测
    this.zone.runOutsideAngular(() => {
      this.keyDownListener = (event) => {
        // 你的热键判断逻辑
        if (event.key === 'YourHotkey') {
          console.log('热键触发，执行焦点切换');
          // 确保在Angular上下文内操作DOM
          this.zone.run(() => {
            this.el.nativeElement.focus();
          });
        }
      };
      window.addEventListener('keydown', this.keyDownListener);
    });

    // 初始化焦点，延迟确保元素已挂载到DOM
    this.setInitialFocus();
  }

  ngOnDestroy(): void {
    // 销毁时移除监听，防止内存泄漏
    window.removeEventListener('keydown', this.keyDownListener);
  }

  private setInitialFocus(): void {
    setTimeout(() => {
      if (this.el.nativeElement.isConnected) {
        this.el.nativeElement.focus();
      }
    }, 0);
  }
}

修改后，*ngIf切换组件时，指令会随组件初始化重新注册监听，销毁时自动清理，避免状态残留。

方案三：使用CSS类控制显示隐藏（替代[hidden]） #

如果可以接受DOM中存在两个组件但仅显示当前模式的，可通过自定义CSS类替代[hidden]，避免[hidden]样式优先级问题：

父组件HTML： #

<div>
  <div>
    <div>
      <div>
        <component1-in-spotlight [class.hidden]="mode !== OptionOne"></component1-in-spotlight>
        <component2-in-spotlight [class.hidden]="mode !== OptionTwo"></component2-in-spotlight>
      </div>
    </div>
  </div>
</div>

全局CSS： #

.hidden {
  display: none !important;
  visibility: hidden;
}

优点：无需修改组件逻辑，写法简单；缺点：两个组件会始终存在于DOM中，若组件依赖的服务开销大，可能影响性能。

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