Angular组件类选择器无法匹配动态添加类名的元素问题

问题根源 #

Angular组件的选择器匹配是编译阶段完成的。你通过[attr.class]="ol.type"动态绑定类名是运行时操作，编译时Angular无法识别这个元素会匹配某个组件的类选择器，因此不会触发组件渲染；而硬编码类名时，编译阶段就能识别并关联组件，所以能正常工作。

可行方案1：组件映射表 + ngComponentOutlet（修复SVG无效问题） #

ngComponentOutlet之前生成无效SVG是因为Angular默认给组件创建div宿主元素，而SVG不允许非SVG标签作为子元素。我们可以通过配置组件宿主为SVG兼容标签来解决：

步骤1：修改SVG组件的宿主配置

给每个SVG组件指定宿主为svg（或g），并传递必要的SVG属性和输入参数：

@Component({
  selector: '.wingedsinglejump',
  template: `
    <!-- 移除外层svg标签，改用宿主元素承载 -->
    <defs>
      <g id="WingedSingleJump" style="stroke: black; stroke-width: 1.5; stroke-linecap: round">
        <rect x="0" y="0" width="24" height="4" style="fill: lightgrey" />
        <line x1="24" y1="2" x2="78" y2="2" />
        <rect x="72" y="0" width="24" height="4" style="fill: lightgrey" />
      </g>
    </defs>
    <use href="#WingedSingleJump" transform="translate(-50 -2)" />
  `,
  host: {
    '[attr.transform]': 'transform', // 接收父组件传递的transform
    'svg': '', // 指定宿主元素为svg
    'width': '100px',
    'height': '4px',
    'viewBox': '0 0 100 4',
    'xmlns': 'http://www.w3.org/2000/svg'
  }
})
export class WingedSingleJumpComponent {
  @Input() transform!: string; // 定义输入属性接收transform
}

步骤2：创建组件映射表并使用ngComponentOutlet

在父组件中维护ObstacleType到组件类的映射，通过ngComponentOutlet动态加载组件并传递输入：

import { Component } from '@angular/core';
import { WingedSingleJumpComponent } from './winged-single-jump.component';
// 导入其他所有障碍组件
import { DoubleJumpComponent } from './double-jump.component';

export enum ObstacleType {
  WingedSingleJump = 'wingedsinglejump',
  DoubleJump = 'doublejump',
  // 其他20+枚举值
}

@Component({
  selector: 'app-obstacle-container',
  template: `
    <svg>
      <g *ngFor="let ol of obstacleLocations">
        <ng-container 
          *ngComponentOutlet="componentMap[ol.type]; 
          inputs: { transform: obstacleLocationTransform(ol) }"
        ></ng-container>
      </g>
    </svg>
  `
})
export class ObstacleContainerComponent {
  obstacleLocations: { transform: string, type: ObstacleType }[] = [
    // 示例数据
    { transform: 'translate(50, 50)', type: ObstacleType.WingedSingleJump },
    { transform: 'translate(200, 100)', type: ObstacleType.DoubleJump }
  ];

  // 类型到组件的映射表
  componentMap: Record<ObstacleType, any> = {
    [ObstacleType.WingedSingleJump]: WingedSingleJumpComponent,
    [ObstacleType.DoubleJump]: DoubleJumpComponent,
    // 补充其他组件映射
  };

  obstacleLocationTransform(ol: { transform: string, type: ObstacleType }): string {
    return ol.transform; // 你的转换逻辑
  }
}

可行方案2：自定义指令动态加载组件 #

如果需要更灵活的控制，可以用自定义指令手动创建组件实例并插入到SVG节点：

步骤1：创建障碍加载指令

import { Directive, Input, OnInit, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ObstacleType } from './obstacle-type.enum';
import { WingedSingleJumpComponent } from './winged-single-jump.component';
// 导入其他组件

@Directive({
  selector: '[appLoadObstacle]'
})
export class LoadObstacleDirective implements OnInit {
  @Input() appLoadObstacle!: ObstacleType;
  @Input() obstacleTransform!: string;

  private componentMap: Record<ObstacleType, any> = {
    [ObstacleType.WingedSingleJump]: WingedSingleJumpComponent,
    // 其他组件映射
  };

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit(): void {
    const componentClass = this.componentMap[this.appLoadObstacle];
    if (!componentClass) return;

    // 创建组件工厂并实例化
    const factory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
    const componentRef = this.viewContainerRef.createComponent(factory);
    
    // 传递transform输入参数
    componentRef.instance.transform = this.obstacleTransform;
  }
}

步骤2：在模板中使用指令

<svg>
  <g *ngFor="let ol of obstacleLocations" [attr.transform]="obstacleLocationTransform(ol)">
    <ng-container 
      appLoadObstacle="ol.type" 
      [obstacleTransform]="obstacleLocationTransform(ol)"
    ></ng-container>
  </g>
</svg>

注意事项 #

• 所有动态加载的组件需要在模块的declarations数组中声明（Angular 9+无需entryComponents，但低版本需要添加）。
• 确保组件模板中的SVG元素使用正确的命名空间，避免渲染异常。
• 可以创建一个基类组件，抽离所有SVG组件的公共属性（如transform、width等），减少重复代码。

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