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

我正在创建一个使用SVG的web应用程序。 我已经创建了由SVG元素组成的组件，它们被放入根

SVG

元素中。 它们有属性选择器，因为SVG/XML文档树是严格的，所以我不能使用元素选择器。 他们有一个以

svg:g

tag:

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

组件是在调用

onMouseDown（）

时创建的，但其DOM元素是

div

，因此它在svg文档中是非法元素，无法显示

我试过使用

selector='svg:g[foo]'

，然后创建了

g

元素，但它的名称空间不是用于svg（

http://www.w3.org/2000/svg

），但是普通的HTML名称空间（

http://www.w3.org/1999/xhtml

），其类为

htmlunknowneElement

g

我还尝试了使用

selector='svg:svg[foo]'

，然后创建并显示

svg:svg

元素。但是

svg:svg

不能使用

transform

属性移动，因此这对我的应用程序不起作用

如何为属性选择器组件动态创建

svg:g

元素

---

我正在使用Angular2:2.0.0-rc4。

而不是尝试使用组件解析程序在视图中创建组件，我将这样做

• 创建一个对象，其属性与要传递给SVG组件的属性相匹配
• 将此对象附加到数组（例如svgItems）
• 将*ngFor=“svgItem in svgItems”添加到要动态创建的SVG组件中

---

希望它清晰明了并解决您的问题。

关于名称空间问题，您是对的，它阻止了

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() { }

}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“svg:svg[customName]”，//防止它劫持其他svg
模板：“…”，//注意此处添加的指令
样式：[]
})
导出类GComponent{
构造函数（）{}
}

---

这可能并不理想，但在解决之前，没有太多的替代方案。

我不确定我的解决方案是否正确，但它对我有效（即使是使用常春藤）：

---

之后，您必须手动将

节点添加到DOM中。
听起来像是感谢，@GünterZöchbauer！这个问题和我想尝试的是一样的。谢谢你提供的信息。我正在等待解决方案/错误修复。
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() { }

}

@Component({
...
})
class ParentComponent {
    constructor(
        private injector: Injector,
        private appRef: ApplicationRef,
        private componentFactoryResolver: ComponentFactoryResolver,
    ) {}

    createDynamicComponent() {
        let node = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        let factory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
        let componentRef = factory.create(this.injector, [], node);

        this.appRef.attachView(componentRef.hostView);
    }
}