动态渲染嵌套组件（在父组件中创建）作为指令

Posted 2023-02-22

【中文标题】动态渲染嵌套组件（在父组件中创建）作为指令

【英文标题】：Render a nested component dynamically (created in the parent component) as a directive

【发布时间】：2020-10-23 17:06:51

【问题描述】：

是否可以？

我知道我可以这样做：

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

其中“skick-back-drop-item”是以下组件：

    @Component(
    selector: '[skick-back-drop-item]',
    templateUrl: './back-drop-item.component.html',
    styleUrls: ['./back-drop-item.component.scss'],
    )
    export class BackDropItemComponent implements OnInit 
    ...

但我想看看是否可以在父组件中创建/实例化该子组件，然后将其作为指令注入到任何 DOM 元素中，DOM 元素将是这样的：

    <svg>
      <svg:g #svgContainer/>
    </svg>

我正在使用 ComponentFactoryResolver 和 @angular/core 中的 ViewContainerRef 在父组件中动态创建子组件

     performFrame() 

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

但这种方法会创建以下包装 div 容器：

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

如果组件渲染为指令，则只渲染子组件的内容，这是我需要的，因为子组件包含 SVG 元素。如果添加了该包装器，则 SVG 不会呈现，因为 SVG 树中的那个奇怪的 div。

【参考方案1】：

您可以删除主机或将其转换为有效的 svg --> 如下所示：Remove the host HTML element selectors created by angular component

【讨论】：

该帖子中的一个答案可以为我的问题提供解决方案，但是这个问题更侧重于在 DOM 中创建和注入组件作为指令。我对你的回答投了赞成票，但我会等着看是否有人提出另一种解决问题的方法。