在没有宿主元素容器的情况下渲染嵌套组件 - 将 SVG 部分分离到不同的组件中

Question

我有一个带有 SVG 元素的组件，我试图将该 SVG 的各个部分分成不同的组件。嵌套组件需要从父组件动态创建，这是因为我正在从 json 文件构建整个 SVG 图形，该文件确定需要添加哪些嵌套组件（SVG 嵌套形状）。

为了动态创建组件，我使用 ComponentFactoryResolver 和 @angular/core 中的 ViewContainerRef

@Component({
selector: 'skick-player',
 templateUrl: './player.component.html',
 styleUrls: ['./player.component.scss'],
})
export class PlayerComponent implements OnInit, AfterViewInit {

@ViewChild('svgContainer', { read: ViewContainerRef }) container;

constructor( private resolver: ComponentFactoryResolver) {}

  performFrame() {

      ....
     //Add nested component
      const factory = this.resolver.resolveComponentFactory(
        BackDropItemComponent
      );
      const componentRef = this.container.createComponent(factory);
      componentRef.instance.imagePath = objectUrl;
    }
  }
});

}

问题是 Angular 将嵌套组件包裹在 div 中：

<div _nghost-qon-c42="" skick-back-drop-item="" class="ng-star-inserted">

因此，由于创建了特殊的元素标签，它不会被渲染。如果删除该 div 元素，它将正确渲染嵌套的 SVG。

我知道我可以将嵌套组件渲染为指令并且它会起作用，如下所示：

<svg>
<svg:g skick-back-drop-item />
</svg>

但在我的用例中，控制器需要从父组件动态渲染，因此该方法对我不起作用。

也许有一种方法可以以编程方式将（添加嵌套控制器）渲染为来自父组件的指令（请记住嵌套组件具有 @input 属性）？

或者

是否可以有不可见的组件容器？在没有任何容器的情况下渲染嵌套组件的内容？

---

父模板：

<div class="patch-overlay" cdkDrag>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:svgjs="http://svgjs.dev/svgjs" width="100%" height="100%">
    <<ng-container #svgContainer></ng-container>>
</svg>
</div>

嵌套组件模板（示例）：

<svg width="400" height="110">
<rect [attr.width]="width" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Answer 1

由于这在谷歌第一页上显示为最新的问题，因此这里的解决方法似乎在所有情况下都有效：使用显示内容。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.sass'],
  host: {
    style: "display: contents"
  }
})
export class MyComponent {}

这是通过告诉浏览器表现得好像宿主元素根本不存在一样来工作的；如果您检查元素，它仍然是 html 的一部分，但不会成为任何渲染/调整大小/位置考虑因素的一部分。PS 这确实比根本不将其包含在 html 中具有优势，它仍然是 CSS 的可选 html 元素

Answer 2

我已经尝试做你正在做的事情。我的错误包括构建专门的 FormGroup 组件（不要这样做）。最近，我使用ControlValueAccessor构建了一个组件，它工作得非常好并且满足了我的目的。

我还没有使用ng-template它及其相关功能构建任何东西，例如ngTemplateOutlet. 不过，我怀疑这可能对你有帮助。ng-template在 DOM 中被移开，这就是您正在寻找的。

这是 Angular University 的解释。我还发现 Netanel Basel 有很好的信息。

如果你想尝试 CVA 路线，上周我刚刚完成了一个项目的重新编码，并在这里做了很多关于 SO 的研究。发现一个涉及我想做的事情的问题，然后回去写了一个对我有用的新答案。检查一下，它可能会给你你需要的东西。