如何在Angular2中动态创建SVG组件? [英] How to create an SVG component dynamically in Angular2?

问题描述

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

I am creating a web application which uses SVG. I have created components consist of SVG element, and they are put into a root svg element. They have attribute selector, because SVG/XML document tree is strict so I cannot use element selector. And they have a template starts with svg:g tag:

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

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

In the application, I want to create a component when a user press a button, and simultaneously start dragging it. I thought it can be achieved by creating a component dynamically using 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`.
      })
  }

在调用onMouseDown()时创建了组件，但其DOM元素为div，因此它在svg文档中是非法元素，无法显示.

Component is created when onMouseDown() called, but its DOM element is div, so it is illegal element in svg document and cannot be displayed.

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

I have tried with selector='svg:g[foo]', then g element is created, but its namespace is not for SVG (http://www.w3.org/2000/svg), but normal HTML namespace (http://www.w3.org/1999/xhtml) and its class is HTMLUnknownElement > g.

我也尝试过使用selector='svg:svg[foo]'，然后创建svg:svg元素并显示它.但是svg:svg不能随transform属性一起移动，因此对于我的应用程序来说效果不佳.

I also tried with selector='svg:svg[foo]', then svg:svg element is created and it is displayed. But svg:svg cannot move with transform attribute so this doesn't work well for my application.

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

How can I dynamically create svg:g element for attribute selector component?

我正在使用Angular2:2.0.0-rc4.

I am using Angular2: 2.0.0-rc4.

推荐答案

关于命名空间问题，使g元素无法呈现为svg是正确的.不幸的是，将节点附加为svg元素是将组件正确地正确命名为命名空间的唯一方法.

You're right about the namespacing issues keeping the g element from rendering as svg. Unfortunately, attaching the node as an svg element is the only way to feasibly get the component to namespace properly.

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

However, this doesn't mean this won't work. If you add the drag functionality as a directive on the g element in the template, it will be compiled with your component, and you can offset your logic into that directive. The top level svg will be namespaced correctly, and the template will inherit this accordingly.

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 已解决，没有太多选择.

This may not be ideal, but until https://github.com/angular/angular/issues/10404 is resolved, there's not much of an alternative.

这篇关于如何在Angular2中动态创建SVG组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！