Angular：为指定类锚点包裹span并添加SVG及实现样式生效

问题原因 #

你当前的方案中，通过ng-content投影进来的<a class="x">属于父组件的DOM节点，而AnchorComponent的样式默认采用组件封装（Emulated模式），该模式下样式仅作用于组件自身模板内的元素（如span、svg），无法渗透到外部投影进来的元素上，因此锚点元素无法获取组件内的样式。

解决方案 #

以下两种方式可实现对span、SVG、锚点三个元素的样式控制：

方法1：使用:host-context()选择器控制投影元素 #

修改AnchorComponent的样式文件，通过:host-context()选择器匹配投影进来的.x类锚点，同时保留对span和SVG的直接样式定义：

/* AnchorComponent的样式文件 */
span {
  /* 自定义span的布局样式 */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

span svg {
  /* 自定义SVG的样式 */
  width: 16px;
  height: 16px;
  fill: currentColor;
}

:host-context(.x) {
  /* 控制投影进来的a.x元素 */
  outline: 1px solid red;
  background-color: rgba(255, 255, 255, 0.4);
}

方法2：关闭组件样式封装（适合简单场景） #

若AnchorComponent不需要样式隔离，可直接关闭样式封装，让组件内的样式全局生效，从而覆盖投影元素：
在AnchorComponent的装饰器中添加encapsulation: ViewEncapsulation.None：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-anchor',
  templateUrl: './anchor.component.html',
  styleUrls: ['./anchor.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭样式封装
})
export class AnchorComponent {}

此时你原来的span > *样式会同时作用于SVG和投影的锚点元素，但需注意这种方式可能导致样式污染全局其他元素。

优化指令逻辑（可选） #

原指令逻辑可能会留下重复节点，可调整为移除原锚点元素后再投影，确保DOM结构干净：

import { Directive, OnInit, ViewContainerRef, ElementRef } from '@angular/core';
import { AnchorComponent } from "../components/typography/anchor/anchor.component";

@Directive({
  selector: 'a.x'
})
export class AnchorDirective implements OnInit {
  constructor(
    private viewContainer: ViewContainerRef,
    private el: ElementRef<HTMLAnchorElement>
  ) {}

  ngOnInit(): void {
    const nativeElement = this.el.nativeElement;
    // 从父节点移除原锚点元素
    nativeElement.remove();
    // 创建组件并投影原锚点元素
    this.viewContainer.createComponent(AnchorComponent, {
      projectableNodes: [[nativeElement]]
    });
  }
}

最终效果 #

调整后，span、SVG、a.x三个元素均可被正确设置样式，DOM结构完全符合需求：

<span>
  <svg xmlns="http://www.w3.org/2000/svg">
    <!-- SVG content here -->
  </svg>
  <a class="x">text</a>
</span>

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