svg - 如何在 Angular2 中动态创建 SVG 组件？

Question

我正在创建一个使用 SVG 的网络应用程序。我创建了由 SVG 元素组成的组件，并将它们放入根 svg 元素中。他们有属性选择器，因为 SVG/XML 文档树是严格的所以我不能使用元素选择器。他们有一个以 svg:g 标签开头的模板:

@Component({
  selector:'[foo]',
  template: '<svg:g>...</svg:g>',
})

在应用程序中，我想在用户按下按钮时创建一个组件，并同时开始拖动它。我认为可以通过使用 ComponentResolver 动态创建组件来实现:

  @ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef})
  protected dynamicComponentTarget: ViewContainerRef

  private componentResolver: ComponentResolver

  onMouseDown() {
    this.componentResolver
      .resolveComponent(FooComponent)
      .then((factory) => {
        const dynamicComponent = this.dynamicComponentTarget.createComponent(factory, 0)
        const component: FooComponent = dynamicComponent.instance
        const element = dynamicComponent.location.nativeElement
        // add event listener to start dragging `element`.
      })
  }

Component是在onMouseDown()调用时创建的，但是它的DOM元素是div，所以在svg文档中是非法元素，无法显示。

我尝试使用 selector='svg:g[foo]'，然后创建了 g 元素，但它的命名空间不适用于 SVG (http ://www.w3.org/2000/svg)，但普通的 HTML 命名空间 (http://www.w3.org/1999/xhtml) 及其类是 HTMLUnknownElement > g.

我还尝试使用 selector='svg:svg[foo]'，然后创建并显示 svg:svg 元素。但是 svg:svg 不能随 transform 属性移动，所以这对我的应用程序来说效果不佳。

如何为属性选择器组件动态创建 svg:g 元素？

我正在使用 Angular2:2.0.0-rc4。

Answer 1

关于阻止 g 元素呈现为 svg 的命名空间问题，您是对的。不幸的是，将节点附加为 svg 元素是将组件正确地放入命名空间的唯一可行方法。

但是，这并不意味着这行不通。如果您将拖动功能作为指令添加到模板中的 g 元素上，它将与您的组件一起编译，并且您可以将您的逻辑偏移到该指令中。顶级 svg 将被正确命名，模板将相应地继承它。

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

@Component({
  selector: 'svg:svg[customName]', // prevent this from hijacking other svg
  template: '<svg:g dragDirective>...</svg:g>', // note the directive added here
  style: []
})
export class GComponent {

  constructor() { }

}

这可能并不理想，但直到 https://github.com/angular/angular/issues/10404已解决，没有太多选择。